如何证明水平清单的合理性？

Question

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

<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和ul选择，但他们仍然是左对齐。

#Navigation
{
    text-align: justify;
}

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

这很奇怪，因为如果使用text-align: right，它的行为将达到预期。

如何平均分配链接？

Answer 1

现代方法-CSS3 Flexboxes

现在我们有了CSS3 flexboxes，您不再需要使用技巧和变通方法来实现此目的。幸运的是，浏览器支持已经走了很长一段路，我们大多数人都可以开始使用flexbox。

只需将父元素设置display为flex，然后将该justify-content属性更改为space-between或space- around，以便在子级flexbox项之间/周围添加空间。然后添加其他供应商前缀以获得更多浏览器支持。

使用justify-content: space-between - 此处为示例） ：

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>

使用justify-content: space-around -

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>