問題描述
我想創建一個鏈接的水平導航列表，其中導航鏈接均勻分布并占據封閉容器 <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 寬度的等距導航鏈接的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！