我想创建一个水平导航链接列表,其中导航链接均匀分布并占据封闭容器的整个宽度 <ul>
。导航链接可以有不同的宽度。第一个和最后一个链接应与 <ul>
的开头和结尾对齐。分别(意味着链接不居中),如下所示:
|left side..right side|
link1 link1 link3 link4
除非我弄错了,否则我认为 CSS2 中没有办法做到这一点。但是CSS3有没有办法做到这一点呢?否则我需要用 Javascript 来完成。
最佳答案
如果您坚持使用 CSS3,则可以使用 box-flex
来实现。由于这并未在所有浏览器中完全实现,因此这些属性仍然具有 -moz
和 -webkit
前缀。
这是执行此操作的 CSS:
ul {
display: box;
}
li {
box-flex: 1;
}
但由于并非所有浏览器都使用它,因此您必须添加 -moz-box-flex
、-webkit-box-flex
等。
这是一个演示:http://jsfiddle.net/tBu4a/9/
关于css - CSS3 中均匀间隔的导航链接占据 ul 的整个宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6509183/