logo标签列表

如何为横向列表提供合理的理由？

htmlcsshtml-listsjustify
50
我有一个如下所示的水平导航栏：
<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 的空间。我尝试在 li 和 ul 选择器中都添加了 text: justify，但它们仍然是左对齐的。

#Navigation
{
    text-align: justify;
}

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

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

我该如何让链接均匀分布？

<li>元素的数量会是可变的吗？ - Sparkup
1
那么，如果您需要帮助，可以找thirtydot先生。 - Sparkup
10个回答
42

现代方法 - CSS3 弹性盒子

现在我们有了CSS3 弹性盒子, 您不再需要使用技巧和变通来使其工作。幸运的是，浏览器支持已经取得了长足的进步, 大多数人都可以开始使用弹性盒子。

只需将父元素的display属性设置为flex，然后将justify-content属性更改为space-between或space-around即可在子元素的弹性盒项目之间/周围添加空间。然后添加更多供应商前缀以获得更多浏览器支持。 使用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>

如何使其与IE9兼容？ - serge
justify-content: center 也可以使用。这样做的好处是，您仍然可以使用 float: left 来控制列表项之间的间距。 - PointedEars
35

你需要使用一个“技巧”来使其工作。

参见： http://jsfiddle.net/2kRJv/

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 技巧的详细信息：内联块在 Internet Explorer 7、6 中不起作用

9
text-align: justify 只有在有多于一行的“文本”（或者在这个例子中，是 inline 的 li）时才有效。因此，另一行（.stretch）被添加了进去。display: inline-block 允许 width: 100% 生效。 - thirtydot
5
注意了 - 据我所知，如果在每个<li>内有多个单词，此方法会出现问题（完整的宽度调整）。 - Joshua Stewardson
只是一条注释，这个问题是2年前提出的，但现在我相信大多数人都会同意，在大多数情况下，对齐是不好的，并且应该避免使用。考虑一下非常宽的代码块... - ViliusL
2
@JoshuaStewardson：幸运的是，这很容易解决：http://jsfiddle.net/thirtydot/2kRJv/822/。我刚刚注意到有人早在这之前就发布了相同的修复程序：https://dev59.com/8Gw15IYBdhLWcg3wA3GT#14649908。 - thirtydot
现在您可以使用 #Navigation:after 替换 #Navigation .strech，并且删除多余的 <li>。 - Zaz
1
针对 PHP 程序员的注意事项：如果您使用 PHP 条件来输出 HTML，则可能需要在 "<li>" 的末尾连接 "\n"。否则，如果您将 HTML 输出为单个块，则无法正常工作。 - 1011 1110
26
可以使用在 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.. 这可能会让其他人感到困惑。 除此之外，是thirtydot答案的很好的替代方案，+1。 - Bill
好的，说实话我甚至没有注意到（已经有一段时间没有写纯CSS了）。我已经更新了我的答案。 - Ben Foster
1
喜欢这个，比被接受的答案更干净、更不破坏性。 - cfx
@gordian：这个答案和我的答案几乎一样。使用的技术完全相同，唯一的区别是微不足道的。我当时试图支持IE7（不支持:after），这是我在2011年关心的事情。 - thirtydot
+1 确保您的 li 元素之间有空格，否则它不会对齐。 - Dunc
5
只需要执行以下操作：
ul { width:100%; }
ul li {
  display:table-cell;
  width:1%;
}
1
你应该将代码与文本分开，改善代码格式，并用一句话解释CSS的作用。 - Sebastian Zartner
虽然其他解决方案（不是 flexbox）只适用于单词菜单链接，但这个解决方案完美地解决了问题！谢谢。 - Marco
请解释一下 width:1% 的含义。 - Sathish Kumar
4
这可能适合您的需求：
#Navigation{
}
#Navigation li{
    list-style-type: none;
    text-align: center;
    float: left;
    width: 50%; /*if 2 <li> elements, 25% if 4...*/
}

demo : http://jsfiddle.net/KmqzQ/

运行良好，但必须设置正确的“宽度” :) - thirtydot
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/
1
你需要将 <li> 元素分开，否则对齐不起作用。
For example, this:

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


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

或者至少在开放和关闭的
  • 标签之间有空格。
    • 0
    0

    使用CSS Flexbox

    #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;
}
    0

    这篇博客提供了一个非常强大的解决方案。不过，为了适应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/

    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文，
    原文链接