在 CSS3 中占据整个 ul 宽度的等距导航链接

时间:2023-01-06
本文介绍了在 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/

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

上一篇:如何创建一个水平菜单,每个项目之间的宽度和间距相等? 下一篇:CSS动态水平导航菜单填充特定宽度(表格行为)

相关文章

最新文章