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

问题描述

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

| left side..right side |

link1 link1 link3 link4

除非我错了，我不认为有办法在CSS2中做到这一点。但是有没有办法在CSS3中做呢？

解决方案

如果你坚持使用CSS3，你可以使用 box-flex 。因为这并没有在所有浏览器中完全实现，所以属性仍然具有 -moz 和 -webkit 前缀。 / p>

这里是CSS做的：

  ul {
显示：box; 
} 
 
 li {
 box-flex：1; 
} 
  

但由于并非所有浏览器都使用它，所以您必须添加 -moz-box-flex ， -webkit-box-flex 等。

以下是演示： http://jsfiddle.net/tBu4a/9/

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:

|left side..right side|

link1 link1 link3 link4

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.

解决方案

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.

Here's the CSS to do it:

ul {
  display: box;
}

li {
  box-flex: 1;
}

But since not all browsers use it, you have to add -moz-box-flex, -webkit-box-flex, etc.

Here's a demo: http://jsfiddle.net/tBu4a/9/

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