CSS面板问题

Question

这里是一个的jsfiddle：

http://jsfiddle.net/s7xp1amg/5/

HTML：

<div class="panel panel-default" style="background-color: #CEECF5;"> 
    <div class="panel-body"> 
     <ul id="sortable"> 
      <li class="ui-state-default">p</li> 
      <li class="ui-state-default">e</li> 
      <li class="ui-state-default">r</li> 
      <li class="ui-state-default">r</li> 
      <li class="ui-state-default">o</li> 
     </ul> 
    </div> 
</div> 

CSS：

#sortable { 
    list-style-type: none; 
    margin: 0; 
    text-align: center; 
    padding: 0; 
    width: 100%; 

} 
#sortable li { 
    margin: -8px 8px 3px 0; 
    padding: 5px; 
    _float: left; 
    display: inline-block; 
    width: 40px; 
    height: 40px; 
    font-size: .8em; 
    text-align: center; 
    font-weight:bold; 
} 

JS：

$(function() { 
    $(" #sortable ").sortable({ 
     axis: "x", 
     containment: "window" 
    }); 
}); 

当你去移动在的jsfiddle结果区域的字母砖的一个，整个面板区域“扩大”上点击瓷砖垂直向上移动。然后，当你放下瓷砖时，它会“缩回”。有关如何防止此行为的任何想法？

Answer 1

添加属性：

float: left; 

到li元件防止了。

但是，如果你想为中心的瓷砖那么有些东西需要修改：

1 - 在HTML中，列表将现在的表embeeded。

2 - 在CSS中，ul元素失去width: 100%

3 - 在CSS中，声明margin: auto的元素table

这里检查它：http://jsfiddle.net/s7xp1amg/12/

Answer 2

要么添加：

vertical-align: top; 

或浮动双方父母和列表项。