javascript - 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 结果区域中的一个字母图 block 时，整个面板区域会在单击时“展开”并且图 block 垂直向上移动。然后，当您放下瓷砖时，它会“缩回”。关于如何防止这种行为的任何想法？

Answer 1

添加属性:

float: left;

li 元素阻止了这种情况。

但是，如果您希望图 block 居中，则需要修改一些内容:

1 - 在 html 中，列表现在将嵌入到表格中。

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

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

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