JQuery UI 可排序的水平列表有额外的 space

Question

这是我在 Whosebug 上的第一个问题！

使用JQuery UI，我想构建两个可排序列表，发送列表垂直显示，接收列表水平显示。接收列表中已经有一些值。

我的问题是接收列表中已有的项目之间有一点 space，当用户从发送列表中添加其他项目时，这些项目不会出现。这不是一个阻塞问题，但它看起来确实不是很专业......

我检查了所有的CSS属性，所有的LI都是一样的。我真的不知道该怎么办...

这是代码(Fiddle: http://jsfiddle.net/t5gwfkkp/):

HTML

<ul id="receive">
    <li>un</li>
    <li>deux</li>
</ul>
<br>
<ul id="send">
    <li>trois</li>
    <li>quatre</li>
    <li>cinq</li>
</ul>

CSS

#receive li {
       display:inline-block !important;
}

ul {
    list-style-type: none;
}

Javascript

 $("#send").sortable({
    connectWith: '#receive',
 });

$("#receive").sortable();
$("#receive").disableSelection();

$("#receive li").addClass("ui-widget-content");

有人有想法吗？

Answer 1

发现问题。当您 float:left 列表项时，ul 不会呈现为块。

这将起作用：

http://jsfiddle.net/t5gwfkkp/2/

<ul id="receive">
    <li>un</li>
    <li>deux</li>
</ul>
<br>
<ul id="send">
    <li>trois</li>
    <li>quatre</li>
    <li>cinq</li>
</ul>

#receive li {
    float: left;
    margin-right: 5px;
}

ul {
    list-style-type: none;
    display:block;
    overflow:hidden
}

#send {
    width:50px;
}