css - 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/