Line break needed for text-align:justify in list <li>

Question

I dont understand why this code:

<ul id="Navigation">
<li><a href="About.html">About</a></li>
<li><a href="Contact.html">Contact</a></li>
<li><a href="Contact.html">Contact</a></li>
<li><a href="Contact.html">Contact</a></li>
<li><a href="Contact.html">Contact</a></li>
<!-- ... -->
<li class="stretch"></li>
</ul>

CSS:

#Navigation
{
list-style-type: none;
text-align: justify;
height: 21px;
background: #ccc
}

#Navigation li
{
display: inline
}
#Navigation .stretch {
display: inline-block;
width: 100%;

/* if you need IE6/7 support */
*display: inline;
zoom: 1
}

fiddle

dont work when you remove line breaks in html, like this:

<ul id="Navigation">
<li><a href="About.html">About</a></li><li><a href="Contact.html">Contact</a></li><li><a href="Contact.html">Contact</a></li><li><a href="Contact.html">Contact</a></li><li><a href="Contact.html">Contact</a></li><li class="stretch"></li>
</ul>

fiddle

Justify text-align doesnt work then. Does anybody know why?

Thanks

Answer 1

The second example doesn't work because there are no spaces between words (as elements in the inline formatting context cause spaces from carriage returns and HTML space) so there is no space to justify.

From the 2.1 Spec:

In the case of 'justify', this property specifies that the inline-level boxes are to be made flush with both sides of the line box if possible, by expanding or contracting the contents of inline boxes, else aligned as for the initial value. (See also 'letter-spacing' and 'word-spacing'.)