html - 文本对齐需要换行：在列表中对齐

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

第二个示例不起作用，因为单词之间没有空格（因为内联格式上下文中的元素会导致回车和 HTML 空格中出现空格），因此没有空格来证明.

从2.1 规范：

在'justify'的情况下，这个属性指定如果可能的话，通过扩展或收缩内联框的内容，使内联级框与行框的两侧齐平，否则与初始值对齐。（另见“字母间距”和“字间距”。）