html - リスト内の text-align:justify には改行が必要です

Question

このコードの理由がわかりません：

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

フィドル

次のように、html で改行を削除すると機能しません。

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

フィドル

その場合、テキストの位置合わせは機能しません。理由を知っている人はいますか？

ありがとう

Answer 1

2 番目の例は、単語間にスペースがないため機能しません (インライン フォーマット コンテキストの要素により、キャリッジ リターンと HTML スペースからスペースが発生するため) 。

2.1仕様から：

'justify' の場合、このプロパティは、インライン ボックスの内容を拡大または縮小することによって、インライン レベルのボックスが可能な場合はライン ボックスの両側と同じ高さになるように指定し、それ以外の場合は初期値のように整列します。(「文字間隔」および「単語間隔」も参照してください。)