居中的導航欄和鏈接

Question

我一直在尋找一種方法來製作與頁面一樣寬的導航欄，並使用均勻分佈的鏈接。我看着因爲這兩個地方：

http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_float_advanced http://www.cssnewbie.com/full-width-centered-navigation-bar/

他們有點幫助，但沒有解釋均勻地分佈鏈接。它們全都浮在左邊或右邊。任何援助與此將非常感激。

Answer 1

如果我瞭解你的問題，你必須使用百分比。

這裏快速例如：

ul { 
 
    width: 100%; 
 
    display: inline-block; 
 
    background: green; 
 
} 
 

 
ul li { 
 
    float: left; 
 
    width: 25%; 
 
    text-align: center; 
 
}

<ul> 
 
    <li><a href="">LINK 1</a></li> 
 
    <li><a href="">LINK 2</a></li> 
 
    <li><a href="">LINK 3</a></li> 
 
    <li><a href="">LINK 4</a></li> 
 
</ul>

在列表4項需要設定每個LI寬至25％，其中5個項目，寬度爲20％等...

Answer 2

據我所知，均勻分佈元素的唯一方法是使用寬度爲100％的<table>。每個其他解決方案都要求您指定一個百分比的寬度，但您可能不知道，因爲鏈接的數量可能會有所不同。

除此之外，您仍然可以使用javascript來查明broser的視口有多大來指定寬度。 see this blog entry