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。我根据你的评论将所有边框和填充归零，你可以添加一些，但你当然需要将第一个链接的左边框/填充和右边的边框/填充清零。使用li:first-child或li:first-child a（以及相反的last-child个）链接。

在CSS3中占据整个ul宽度的均匀间隔的导航链接

2 个答案: