Php 如何重新排列内联块元素列表以填充所有空白？

我需要对属性为

display:inline block

的元素列表进行重新排序，并且未定义填充所有空白的宽度

你可以通过这个例子理解我的意思：

如您所见，在第一个列表中，在“不太长的文本”附近有很多空白，在第二个列表中，该空间由两个足够短的元素填充。我需要把它自动化

在这个例子中，你可以看到一个红色的矩形是什么“空白”

---

我可以使用PHP、jQuery、CSS等。你有什么建议吗？

如果我理解正确，你想删除LI之间的空白吗？ 这是我得到的。将整个ULs封装在父元素中

<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>

---

如果我正确理解了您的问题，您基本上希望不同宽度的元素创建某种整洁的网格。如果是这样，您可以尝试使用同位素插件：

您的解决方案有什么问题？正如我看到的，您的两个示例都填补了所有可能的空白。@Vucko我需要像第二个示例一样自动重新排列列表以进行转换。在第一个例子中，第一行的左边有很多空白，第二行的空格中有足够短的条目，可以放在空格中…@Morpheus请阅读我的编辑。谢谢，但这不是我的问题，我编辑了我的问题，也许现在更容易理解。谢谢，正是我想要的

#test{
  font-size: 0px;
}

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