拖动时出现意外的边距/填充（jQuery Ui）

Question

我正在通过jQuery ui实现一个draggle无序列表，并期待拖动元素时出现问题它添加了一些我无法找到的边距或填充。

<ul class="sortable-queue">
                            <li class="item-dragable">
                                Drag me
                            </li>
                            <li class="item-dragable">
                                Drag me
                            </li>
                            <li class="item-dragable">
                                Drag me
                            </li>
                        </ul>

 ul {
        padding: 0;
        margin: 0;
    }

    .item-dragable {
        width: 108px;
        background-color: @color-white;
        height: 150px;
        display: inline-block;
        margin: 0;
        margin-right: 11px;
        .drop-shadow(2px, 2px, 3px, 0.1);

        &:last-child {
            margin-right: 0 !important;
        }

        &:hover {
            cursor: pointer;
        }
    }

（较少用于css，ul表示.sortable-queue）

这是最初的列表：

这就是拖动项目时的样子（我只想水平拖动它）

启动jQuery ui：

$( ".sortable-queue" ).sortable({
      revert: true,
      axis: "x",
      containment: "parent", 
      scroll: false
    });

Answer 1

您忘了将float:left添加到draggable的CSS中，添加后，它会工作，但是，ul的高度现在无法达到从How do you keep parents of floated elements from collapsing

计算

添加

ul:after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}

会让孩子的身高对ul

可见

以下是您的期望：jsfiddle