在 CSS3 中占据整个 ul 宽度的等距导航链接
我想创建一个链接的水平导航列表,其中导航链接均匀分布并占据封闭容器 <ul>
的整个宽度.导航链接可以是不同的宽度.第一个和最后一个链接应该分别与 <ul>
的开头和结尾对齐(意味着链接不居中),如下所示:
I'd like to create a horizontal navigation list of links, where the nav links are evenly spaced and take up the full width of the enclosing container <ul>
. Nav links can be different widths. The first and last links should line up with the beginning and end of the <ul>
respectively (meaning the links aren't centered), like this:
|左侧..右侧|
链接1 链接1 链接3 链接4
除非我弄错了,否则我认为在 CSS2 中没有办法做到这一点.但是有没有办法在 CSS3 中做到这一点?否则我需要用 Javascript 来做.
Unless I'm mistaken, I don't think there is a way to do this in CSS2. But is there a way to do it in CSS3? Otherwise I'll need to do it in Javascript.
推荐答案
如果你坚持CSS3,你可以用box-flex
来做到.由于这并非在所有浏览器中都完全实现,因此属性仍然具有 -moz
和 -webkit
前缀.
If you insist on CSS3, you can do it with box-flex
. Since this isn't fully implemented in all browsers, the properties still have the -moz
and -webkit
prefixes.
这是实现它的 CSS:
Here's the CSS to do it:
ul {
display: box;
}
li {
box-flex: 1;
}
但由于不是所有浏览器都使用它,所以你必须添加-moz-box-flex
、-webkit-box-flex
等
But since not all browsers use it, you have to add -moz-box-flex
, -webkit-box-flex
, etc.
这是一个演示:http://jsfiddle.net/tBu4a/9/
相关文章