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
}

fiddle

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

fiddle

对齐text-align不起作用。有人知道为什么吗？

由于

Answer 1

第二个示例不起作用，因为单词之间没有空格（因为内联格式化上下文中的元素会导致回车和HTML空间中的空格），因此没有空间来对齐。 / p>

来自2.1 Spec:

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

列表<li> </li>中text-align：justify需要换行符

1 个答案: