html - 如何证明水平 list 的合理性？

This question already has answers here:

How do I *really* justify a horizontal menu in HTML+CSS?

(13个回答)


在4个月前关闭。




我有一个类似下面的水平导航栏:

<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，它的行为将符合预期。

如何平均分配链接？

最佳答案

现代方法-CSS3 Flexboxes
现在我们有了CSS3 flexboxes，您不再需要使用技巧和变通办法来完成这项工作。幸运的是browser support has come a long way，我们大多数人都可以开始使用flexbox。
只需将父元素的display设置为flex，然后将 justify-content property更改为 space-between 或 space-around ，以便在子级flexbox项之间/周围添加空间。然后为more browser support添加其他供应商前缀。
使用justify-content: space-between -(example here):

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 -(example here):

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>

关于html - 如何证明水平 list 的合理性？ ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6879467/