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

Question

我想创建一个链接的水平导航列表，其中导航链接均匀分布并占据封闭容器<ul> 的整个宽度。导航链接可以是不同的宽度。第一个和最后一个链接应分别与<ul> 的开头和结尾对齐（意味着链接不居中），如下所示：

|left side..right side|

link1 link1 link3 link4

除非我弄错了，否则我认为在 CSS2 中没有办法做到这一点。但是有没有办法在 CSS3 中做到这一点？否则我需要用 Javascript 来做。

Answer 1

如果您坚持使用 CSS3，可以使用 box-flex。由于这并未在所有浏览器中完全实现，因此属性仍然具有 -moz 和 -webkit 前缀。

这是实现它的 CSS：

ul {
  display: box;
}

li {
  box-flex: 1;
}

但由于并非所有浏览器都使用它，所以你必须添加-moz-box-flex、-webkit-box-flex等。

这是一个演示：http://jsfiddle.net/tBu4a/9/

Answer 2

这对 CSS2 来说很简单：

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

Here's a working example。问题不在于 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;
}

Here it is in action。我已根据您的 cmets 将所有边框和填充清零，您可以重新添加一些，但您当然需要将第一个链接的左边框/填充和右侧的右边框/填充清零使用li:first-child 或li:first-child a（以及相反的last-child）链接。