如何重新排列内嵌块元素的列表以填充所有空白空间？

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 
}