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

【解决方案1】：

您需要使用“技巧”来完成这项工作。

HTML：

<ul id="Navigation">
    <li><a href="About.html">About</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
}

IE6/7诡计详情：Inline block doesn't work in internet explorer 7, 6

【讨论】：

@Maxpm: text-align: justify only works 当你有超过一行的“文本”时（或者在这种情况下，lis 是inline）。因此，添加了另一条“线”（.stretch）。 display: inline-block 允许 width: 100% 工作。
请注意——据我所知，如果您在每个 <li> 中也有多个单词，这种方法有点吓人（全角证明）。
请注意，这个问题是 2 年前提出的，但现在我相信大多数人都会同意，在大多数情况下，证明是邪恶的，应该避免。想想真的很宽的街区......
@JoshuaStewardson：幸运的是，这很容易解决：jsfiddle.net/thirtydot/2kRJv/822。我只是注意到其他人更早之前也发布了相同的修复：stackoverflow.com/questions/6879467/…。
PHP 程序员注意事项：如果您使用 php 条件输出 html，您可能需要在“
”的末尾连接“\n”。否则，如果您在单个 blob 中输出 html，它将无法正常工作。

【解决方案2】：

这可能适合您的需求：

#Navigation{
}
#Navigation li{
    list-style-type: none;
    text-align: center;
    float: left;
    width: 50%; /*if 2 <li> elements, 25% if 4...*/
}

演示：http://jsfiddle.net/KmqzQ/

【讨论】：

与您必须设置正确的 width 的明显警告很好地配合 :)

【解决方案3】：

HTML

<ul id="Navigation">
    <li><a href="#">The Missing Link</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Riluri</a></li>
    <li><a href="#">Contact us</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 li a {
    text-align: left;
    display:inline-block;
}

#Navigation .stretch {
    display: inline-block;
    width: 100%;

    /* if you need IE6/7 support */
    *display: inline;
    zoom: 1
}

查看演示：http://jsfiddle.net/2kRJv/392/

【讨论】：

【解决方案4】：

这也可以使用ul 元素上的伪元素来实现：

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: justify;
}

ul:after {
    content: "";
    width: 100%;
    display: inline-block;
}

li {
    display: inline;
}

【讨论】：

我知道这已经过时了，但也许你不应该使用 LESS，除非它在问题的范围内。可能会让其他人感到困惑。除此之外，三十点的答案的绝佳替代品，+1
好点 - 老实说我什至没有注意到（自从我写普通的 ol'CSS 以来已经有一段时间了）。我已经更新了我的答案。
喜欢这个，比公认的答案更干净，更不老套。
@gordian：这个答案和我的答案几乎相同。使用完全相同的技术，唯一的区别是微不足道的。我试图支持 IE7（不支持 :after），这是我在 2011 年关心的事情。
+1 确保 li 元素之间有空格，否则将无法证明

【解决方案5】：

This blog 有一个令人满意的稳健解决方案。不过，它需要进行一些细微的更改以适应 ul/li 导航：

#Navigation {
    width: 100%;
    padding: 0;
    text-align: justify;
    font-size: 0;
    font-size: 12px\9; /* IE 6-9 */
}
#Navigation>li {
    font-size: 12px;
    text-align: center;
    display: inline-block;
    zoom: 1;
    *display: inline; /* IE only */
}
#Navigation:after {
    content:"";
    width: 100%;
    display: inline-block;
    zoom: 1;
    *display: inline;
}

http://jsfiddle.net/mblase75/9vNBs/

【讨论】：

【解决方案6】：

如果其中有空格，则标记的答案无效。

这里的最佳答案适用于空格 How do I *really* justify a horizontal menu in HTML+CSS?

【讨论】：

【解决方案7】：

您需要将

元素分开，否则 justify 将不起作用。

For example, this:

<ul><li>test</li><li>test</li></ul>


needs to be like this:
<ul>
<li>test</li>
<li>test</li>
</ul>

或至少在开始和结束

标签之间有空格。

【讨论】：

【解决方案8】：

只要做：

ul { width:100%; }
ul li {
  display:table-cell;
  width:1%;
}

【讨论】：

您应该将代码与文本分开，改进代码格式并用一句话解释 CSS 的作用。
虽然其他解决方案（不是 flexbox 解决方案）仅适用于单字菜单链接，但这个解决方案完美！谢谢。
请解释一下宽度的含义：1%

【解决方案9】：

现代方法 - CSS3 Flexboxes

现在我们有了CSS3 flexboxes，您不再需要借助技巧和变通方法来完成这项工作。幸运的是，browser support has come a long way，我们大多数人都可以开始使用 flexbox。

只需将父元素的display 设置为flex，然后将justify-content property 更改为space-between 或space-around，以便在子弹性框项目之间/周围添加空间。然后为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>

【讨论】：

如何让它兼容IE9？
justify-content: center 也可以。这样做的好处是您仍然可以使用float: left 来控制每个margin-left 的列表项的间距。

【解决方案10】：

使用 CSS 弹性盒

#Navigation {
  width: 100%;
  padding: 0;
  margin: .5rem 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  list-style-type: none;
  color: #ffffff;
}

【讨论】：