jquery - 在 jqueryUi 中排序后奇怪的边距

Question

我有一个奇怪的问题，即拖动后 sortable 中的边距。边距似乎消失了，并且盒装彼此粘在一起。试了好久，没找到问题所在。

如有任何帮助，我们将不胜感激。

这是一个 fiddle :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;
}

fiddle :http://jsfiddle.net/mKeAL/

编辑 1
看起来这是 jquery UI 的某种空白/显示内联错误。

此处报告的一般错误:http://bugs.jqueryui.com/ticket/6942

作者回答“对我有用”，指着这个工作 fiddle http://jsfiddle.net/T8gkC/但请注意 HTML 中列表项上的空格。我记得有一个 IE5.5 (6) 错误具有类似的解决方案。如果您使 HTML 变得“正常”，错误又回来了:http://jsfiddle.net/94Vs2/向列表项添加边距会有一点帮助，但如果仔细观察，错误仍然存​​在。

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

编辑 2
根据A Space between Inline-Block List Items的回答你也可以设置 font-size ul 上的 0 个并在 li 上重置它: http://jsfiddle.net/YsG6S/2/工作正常， margin 明智。也就是说，请注意与 block/float 的拖放/排序交互的不同之处。方法与任何 inline-block方法。

编辑 3
另一种选择是从 HTML5 喷泉中大量饮用并省略关闭 </li> 标签。 http://jsfiddle.net/mKeAL/1/