Question

这是关于StackOverflow的第一个问题！

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

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

我检查了所有CSS属性，并且所有LI都是相同的。我真的不知道该怎么做......

以下是代码（小提琴：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;
}

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

1 个答案: