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

I need to reorder a list of elements with the attribute display: inline-block and with not defined width for fill all empty space.

You can understand what I mean with this example:

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

As you can see, in the first list, near "Not so long text" there is lot of white space, and in the second list that space is filled with two elements enough short for fill the space. I need to automatize it.

In this example you can see with a red rectangle what is the "white space" http://jsbin.com/ozuxip/7/edit

I can use PHP, jQuery, CSS etc. Do you have some advice?

If I understood your question properly, you basically want elements of different widths to create some kind of neat grid. If so, you could try using Isotope plugin: http://isotope.metafizzy.co/

If I understand you correctly, you want to remove the white-space between the LI? Here's what I got. Encapsulate your whole ULs in a parent element.

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

And then, add this to your CSS

#test{
  font-size: 0px;
}

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