在CSS3中占据整个ul宽度的等距导航链接

我想创建一个链接的水平导航列表，其中导航链接间隔均匀，占据了封闭容器的整个宽度

。导航链接可以是不同的宽度。第一个和最后一个链接应分别与

的开头和结尾对齐（表示链接不居中），如下所示：

|左侧..右侧|

link1link1link3link4

---

除非我弄错了，否则我认为在CSS2中没有办法做到这一点。但是在CSS3中有没有一种方法可以做到这一点？否则，我将需要使用Javascript来完成这项工作。

这对于CSS2来说非常简单：

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

。问题不在于CSS2没有办法做到这一点，而是IE直到第8版才完全支持CSS2

--编辑

好的，现在我想我明白你的要求了：

ul {
    display: table;
    width: 100%;
    border: 0;
    padding: 0;
    background-color: blue;
}
li {
    display: table-cell;
    border: 0;
    padding: 0;
    text-align: center;
}
li:first-child {
    text-align: left;
}
li:last-child {
    text-align: right;
}
a {
    display: block;
    padding: 0.25em 0;
    background-color: white;
    text-decoration: none;
}

---

。我已经根据您的评论清除了所有边框和填充，您可以再添加一些，但您当然需要使用

li:first child

或

li:first child a

（和相反的

last child

一个）清除第一个链接的左边框/填充和右链接的右边框/填充。由于这并不是在所有浏览器中都完全实现，因此属性仍然有

-moz

和

-webkit

前缀

以下是实现此功能的CSS：

ul {
  display: box;
}

li {
  box-flex: 1;
}

但由于并非所有浏览器都使用它，因此必须添加

-moz-box-flex

，

-webkit-box-flex

，等等

---

这里有一个演示：

谢谢robertc。很接近，但不是我想要的。您提供的示例中的链接不占用封闭容器的整个宽度（即

）。第一个和最后一个链接的左右边缘需要与封闭容器的左右边缘齐平，同时仍保持均匀间隔。这是这个问题的棘手之处。@NorthK它们确实占用了整个可用宽度，但容器上有一个边框（这样您就可以看到它们占用了所有可用宽度）。如果您不想看到它们，只需将所有边框设置为0即可，演示如果您在

nav

和

ul

元素上设置背景颜色，它不会显示在

a

元素后面。您好，robertc，“link six”中的“x”应该与容器的右侧对齐，所有链接的间距相等。在您发布的链接处的示例代码中，“link six”没有与容器的右侧对齐。有关我编写的Javascript解决方案，请参见[link]。仍然想让它工作在CSS虽然！再次感谢，非常感谢你的努力，罗伯特，真的很接近了。但由于第一个和最后一个列表项上的文本对齐，链接的间距不相等。然而，我知道文本对齐是必要的，因此链接与容器的边缘对齐。谢谢Blender。此解决方案似乎与下面的robertc有相同的问题——链接不与容器的左右边缘齐平，但间距相等。我最终写了一个JQuery脚本来完成这项工作，但是如果有一种方法可以在CSS3中实现的话，我仍然感兴趣！你这是什么意思？你能发布你的解决方案吗？我真的不明白你的意思…搅拌机，对不起，如果我没有解释清楚的话。请参阅我在下面发布的robertc下的评论，了解一些额外的内容。为此，您需要添加交替的空白

li

元素，并给它们一个

box flex:1

。带有链接的

li

s将是正常的

display:inline block

s。让我编辑我的解决方案。