均匀间隔的导航链接，在 CSS3 中占据 ul 的整个宽度 [英] Evenly-spaced navigation links that take up entire width of ul in CSS3

问题描述

我想创建一个水平导航链接列表，其中导航链接均匀分布并占据封闭容器的整个宽度

.导航链接的宽度可以不同.第一个和最后一个链接应该分别与
的开头和结尾对齐(意味着链接不居中)，如下所示:

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:

|左侧..右侧|

link1 link1 link3 link4

除非我弄错了，否则我认为在 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/

这篇关于均匀间隔的导航链接，在 CSS3 中占据 ul 的整个宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！