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

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

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

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

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

这是代码（Fiddle:）：

HTML

Javascript

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

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

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

---

有人有想法吗？

找到了问题所在。当您

float:left

列表项时，

ul

不会呈现为块

这将有助于：

联合国
双份




特洛伊
四分之一
辛克

#接李{
浮动：左；
右边距：5px；
}
保险商实验室{
列表样式类型：无；
显示：块；
溢出：隐藏
}
#发送{
宽度：50px；
}

您可以将

#receive li{margin:0 5px 0；float:left；}

这似乎解决了添加的项目“粘”到上一个项目的问题。谢谢您的回答。我尝试过不使用float选项，但是它为已经在这里的项目增加了额外的空间。我在小提琴上尝试了你的解决方案，但奇怪的是，在浮动：左，我不能再将项目放入#接收…效果很好！！谢谢。出于好奇，你知道我为什么会有这个问题吗？

内联块

元素有这个空白“问题”，因为它们毕竟是内联元素。这只是我的猜测。。。哦，如果你愿意，你也可以向上投票：）我投了，但因为我刚刚注册到StackOverflow，我的投票还没有公开。再次感谢tho:）

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

ul {
    list-style-type: none;
}

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

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

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

<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;
}