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

Question

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

|left side..right side|

link1 link1 link3 link4

除非我弄错了,否则我认为在CSS2中没有办法做到这一点.但是有没有办法在CSS3中做到这一点？否则我需要在Javascript中执行此操作.

Answer 1

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

这是用来做CSS的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;
}

这是一个有效的例子.问题不在于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的)链接.