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

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

|left side..right side|

link1 link1 link3 link4

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

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

这是执行此操作的 CSS：

ul {
  display: box;
}

li {
  box-flex: 1;
}

但由于并非所有浏览器都使用它，因此您必须添加-moz-box-flex, -webkit-box-flex, etc.

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