如何重新排列內嵌塊元素的列表以填充所有空白空間？

Question

我需要重新排列具有屬性display: inline-block的元素列表，並用未定義的寬度填充所有空白空間。

你能明白我的意思是這個例子：

http://jsbin.com/ozuxip/1/edit

正如你所看到的，在第一個列表，近「沒有這麼長的文字」有很大的空白，並在第二個列表空間充滿了兩個足以填補空間的元素。我需要自動化它。

在這個例子中，你可以用一個紅色長方形什麼是「白色空間」 http://jsbin.com/ozuxip/7/edit

我可以使用PHP，jQuery的，CSS等你有一些建議，請？

Answer 1

如果我正確理解你的問題，你基本上要不同寬度的元素，創造出某種整齊的網格。如果是的話，你可以嘗試使用同位素插件：http://isotope.metafizzy.co/

Answer 2

如果我正確理解你，你想刪除LI之間的空格？ 這是我得到的。將您的整個UL封裝在父元素中。

<div id="test"> 
<ul class="discussions"> 
    <li class="discussion btn btn-primary">Not so long text</li> 
    <li class="discussion btn btn-primary">Very very long text with lot of words.</li> 
    <li class="discussion btn btn-primary">Another long text foobar.</li> 

    <li class="discussion btn btn-primary">I'm short</li> 
    <li class="discussion btn btn-primary">I'm so short</li> 
    <li class="discussion btn btn-primary">And me?</li> 
    <li class="discussion btn btn-primary">Shut up</li> 
    <li class="discussion btn btn-primary">Ok, sorry... peace bro</li> 
</ul> 
</div> 

，然後將它添加到您的CSS

#test{ 
    font-size: 0px; 
} 

li 
{ 
    margin: 0px !important; 
    font-size: 12; //this can be varied depending on your desired font size 
}