如何证明水平列表的合理性？

我有一个水平导航栏，如下所示：

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

我使用 CSS 删除项目符号点并使其水平。

#Navigation li
{
    list-style-type: none;
    display: inline;
}

我试图证明文本合理，以便每个链接均匀分布以填充整个文本ul的空间。我尝试添加text: justify到两个li and ul选择器，但它们仍然左对齐。

#Navigation
{
    text-align: justify;
}

#Navigation li
{
    list-style-type: none;
    display: inline;
    text-align: justify;
}

这很奇怪，因为如果我使用text-align: right，它的行为符合预期。

如何均匀分布链接？

现代方法 -CSS3 弹性盒 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

现在我们有了CSS3 弹性盒 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes，您不再需要诉诸技巧和解决方法来完成这项工作。幸运的是，浏览器支持已经取得了长足的进步 http://caniuse.com/#feat=flexbox，我们大多数人都可以开始使用弹性盒。

只需设置父元素的display to flex然后更改justify-content财产 https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content到任一space-between http://jsfiddle.net/sdaq97hh/ or space-around http://jsfiddle.net/y96j80cy/为了在子弹性盒项目之间/周围添加空间。然后添加额外的供应商前缀更多浏览器支持 http://caniuse.com/#feat=flexbox.

Using justify-content: space-between - (示例在这里） http://jsfiddle.net/sdaq97hh/:

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu {
    display: flex;
    justify-content: space-between;
}

<ul class="menu">
    <li>About</li>
    <li>Contact</li>
    <li>Contact Longer Link</li>
    <li>Contact</li>
</ul>

Using justify-content: space-around - （这里的例子） http://jsfiddle.net/y96j80cy/:

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu {
    display: flex;
    justify-content: space-around;
}

<ul class="menu">
    <li>About</li>
    <li>Contact</li>
    <li>Contact Longer Link</li>
    <li>Contact</li>
</ul>