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

问题描述

我想创建一个链接的水平导航列表，其中导航链接均匀分布并占据封闭容器 <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/

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