Question

我在拖拽后的可排序边缘有这个奇怪的问题。边缘似乎消失，盒装相互粘连。玩了很长时间，无法找到问题。

任何帮助都将受到高度赞赏。

这是一个小提琴：http://jsfiddle.net/YsG6S/
而CSS：

ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; width:500px; }
li { width: 200px; height:100px; display:inline-block; border:1px solid black; }

（排序并拖动以查看保证金问题）

Answer 1

将li元素设置为display: block并浮动它们。

/* changes */
li { 
    display: block;
    margin-right: 2px; /*if you want the space*/
    float: left;
}

小提琴：http://jsfiddle.net/mKeAL/

编辑1
看起来这是一个带有jquery UI的空白/显示内联错误。

此处报告的一般情况：http://bugs.jqueryui.com/ticket/6942

作者回答＆＃39;为我工作＆＃39;，指着这个工作小提琴http://jsfiddle.net/T8gkC/，但请注意HTML中列表项上的空格。我记得IE5.5（6）的bug有类似的分辨率。如果您使HTML＆＃34;正常＆＃34;，则会返回错误：http://jsfiddle.net/94Vs2/为列表项添加边距会有所帮助，但如果仔细观察，该错误仍然存在。

所以...如果您需要它们为display: inline-block，您可以尝试删除每个<li>之间的空格。

编辑2
根据{{3}}的答案，您还可以在font-size上设置ul为0并在li上重置：A Space between Inline-Block List Items工作正常，边缘明智。也就是说，请注意使用block/float方法与任何inline-block方法的拖放/排序交互的差异。

编辑3
另一种选择是从HTML5喷泉中大量饮用，省略您的结束 </li> 标签。 http://jsfiddle.net/YsG6S/2/

在jqueryUi中排序后的奇怪边距

1 个答案: