Why doesn't the "text-justify: align" method for evenly spaced menus work?

Question

Patrick Kunka's blog post Text-align: Justify and RWD describes a clean method of evenly spacing elements.

It worked for me most of the time, but sometimes it didn't -- and I couldn't understand why. But finally I stumbled on an explanation, and decided to create this self-answer post.

Consider the following HTML:

<ul id="Grid">
        <li></li><li></li><li></li><li></li><li class="break"></li>
</ul>

And the following CSS (taken directly from the blog post, except I've added borders and background to make elements visible, and also added a reset for lists):

#Grid{
    text-align: justify;
    font-size: 0.1px; /*hide whitespace between elements*/
    width: 400px;
    border: 1px solid black;
    margin: 0;
    padding: 0;
}

#Grid li{
    display: inline-block;
    width: 23%;
    height: 10px;
    background-color: red;
    border-right: 3px green solid;
}

#Grid .break{
    width: 100%;
    height: 0;
    ...
}

JSFiddle

The text-align property has no effect. Why?

Answer 1

The elements in the markup must have whitespace (spaces or newlines) between them.

<ul id="Grid">
    <li></li> <li></li> <li></li> <li></li> <li class="break"></li>
</ul>

JSFiddle

---

I've encountered this problem mostly with PHP-generated markup, which lacks the usual formatting. For example, this often happens when populating lists with foreach.