jqueryUi排序後奇怪的利潤

我有這個奇怪的問題，可拖拽後排序的利潤。邊距似乎消失，盒裝粘在一起。玩了很多，找不到問題。jqueryUi排序後奇怪的利潤

任何幫助將不勝感激。

這裏有一個小提琴：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; }

（排序並拖動看到裕問題）

來源

2014-03-12 Nir Tzezana

然後你想要什麼？ –

你想讓白色空間像現在一樣在左邊/右邊'li's之間嗎？還是應該全部倒塌？ – Will

在CSS中指定邊距。它會解決問題。但我不確定是什麼原因造成的。 –

設置li元素display: block，並把它們飄浮。

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

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

EDIT 1
看起來這是某種與jquery UI的空白/顯示內聯的錯誤。

Bug多多將軍這裏報道：http://bugs.jqueryui.com/ticket/6942

作者回答說「對我的作品」，在這個工作小提琴http://jsfiddle.net/T8gkC/指着但要注意在HTML中的列表項的空白。我記得有一個類似的解決方案的IE5.5（6）的錯誤。如果您將HTML設置爲「正常」，則錯誤又回來了：http://jsfiddle.net/94Vs2/爲列表項添加邊距有一點幫助，但如果仔細觀察，錯誤仍然存在。

所以...如果你需要他們是display: inline-block你可以嘗試在每個<li>之間取出的空白。

EDIT 2
據當時A Space between Inline-Block List Items的答案，你還可以在ul設置爲0 font-size和重置它的li：http://jsfiddle.net/YsG6S/2/明智做工精細，邊緣。也就是說，請注意與block/float方法的拖放/排序交互的差異與任何inline-block方法的差異。

編輯3
另一種選擇是從HTML5噴泉強烈地喝酒，省去您的交易</li>標籤。 http://jsfiddle.net/mKeAL/1/

來源

2014-03-12 09:03:07 Will

爲什麼我們有這樣的問題？ –

@IshankGupta我更新了我的答案。 – Will

jqueryUi排序後奇怪的利潤

回答

相關問題