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 中，列表现在将嵌入到表格中。

2 - 在 css 中，ul 元素丢失了width: 100%

3 - 在 css 中，为元素 table 声明 margin: auto

在这里查看：http://jsfiddle.net/s7xp1amg/12/

Answer 2

要么添加：

vertical-align: top;

或浮动父项和列表项。