如何证明水平列表的合理性？ [英] How do I justify a horizontal list?

问题描述

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

I have a horizontal navbar like the following:

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

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

I use CSS to remove the bullet points and make it horizontal.

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

我试图证明文本的正确性，所以每个链接均匀分布填充整个 ul 的空间。我尝试为 li 和 ul text：justify >选择器，但它们仍保持左对齐。

I'm trying to justify the text so each link is spread out evenly to fill up the entirety of the ul's space. I tried adding text: justify to both the li and ul selectors, but they're still left-aligned.

#Navigation
{
    text-align: justify;
}

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

这很奇怪，因为如果我使用 text-

This is strange, because if I use text-align: right, it behaves as expected.

如何均匀分布链接？

推荐答案

现代方法 - CSS3 Flexbox

现在我们有 CSS3 flexboxes ，你不再需要诉诸技巧和解决方法，以使这项工作。幸运的是，浏览器支持已经有很长的路要走，我们大多数人都可以开始使用flexbox了。

Modern Approach - CSS3 Flexboxes

Now that we have CSS3 flexboxes, you no longer need to resort to tricks and workarounds in order to make this work. Fortunately, browser support has come a long way, and most of us can start using flexboxes.

只需将父元素的显示设置为 flex ，然后更改 justify-content 属性添加到 之间的空格 或 space-around ，以便在/ flexbox项之间添加空格。然后添加更多浏览器支持的其他供应商前缀。

Just set the parent element's display to flex and then change the justify-content property to either space-between or space-around in order to add space between/around the children flexbox items. Then add additional vendor prefixes for more browser support.

使用 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 - (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>

这篇关于如何证明水平列表的合理性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！