如何創建一個水平菜單，每個項目的寬度和間距相等？

Question

這裏是我到目前爲止有：fiddle

2與它的問題，但：

1. 我已經硬編碼每個li到33%的寬度，這是我不想做這樣我可以輕鬆添加更多項目。
2. 我想在每個項目之間放置一些間距（背景顏色的間隙），但是一旦我添加了一個邊距，一個項目就會碰到一條線。我該如何解決這個問題？

#main-nav { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    overflow: auto; 
 
} 
 
#main-nav li { 
 
    float: left; 
 
    width: 33%; 
 
    height: 25px; 
 
    text-align: center; 
 
} 
 
#main-nav li a { 
 
    width: 100%; 
 
    display: block; 
 
    height: 100%; 
 
    line-height: 25px; 
 
    text-decoration: none; 
 
    background-color: #e0e0f0; 
 
    font-weight: bold; 
 
    color: #021020; 
 
} 
 
#main-nav li a:hover { 
 
    background-color: #498cd5; 
 
    color: #ddeeee; 
 
}

<ul id="main-nav"> 
 
    <li><a href="#">one</a></li> 
 
    <li><a href="#">two</a></li> 
 
    <li><a href="#">three</a></li> 
 
</ul>

Answer 1

參見：http://jsfiddle.net/f6qmm/

display: table被用於均勻地空間的li s的一個動態數。不幸的是，在IE7中使用doesn't work，因此使用*float: left（僅適用於IE7及更低版本），因此至少它們都在同一行上 - 儘管它看起來仍然很可怕。

padding-left: 5px適用於每li，然後li:first-child { padding-left: 0 }刪除它只有第一個li。

#main-nav { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    display: table; 
 
    table-layout: fixed; 
 
    overflow: hidden 
 
} 
 
#main-nav li { 
 
    display: table-cell; 
 
    *float: left; /* improve IE7 */ 
 
    height: 25px; 
 
    text-align: center; 
 
    padding-left: 5px 
 
} 
 
#main-nav li:first-child { 
 
    padding-left: 0 
 
} 
 
#main-nav li a { 
 
    width: 100%; 
 
    display: block; 
 
    height: 100%; 
 
    line-height: 25px; 
 
    text-decoration: none; 
 
    background-color: #e0e0f0; 
 
    font-weight: bold; 
 
    color: #021020; 
 
} 
 
#main-nav li a:hover { 
 
    background-color: #498cd5; 
 
    color: #ddeeee; 
 
}

<ul id="main-nav"> 
 
    <li><a href="#">one</a></li> 
 
    <li><a href="#">two</a></li> 
 
    <li><a href="#">three</a></li> 
 
</ul> 
 

 
<hr /> 
 

 
<ul id="main-nav"> 
 
    <li><a href="#">one</a></li> 
 
    <li><a href="#">two</a></li> 
 
    <li><a href="#">three</a></li> 
 
    <li><a href="#">four</a></li> 
 
    <li><a href="#">five</a></li> 
 
</ul>

Answer 2

試試這個小提琴：http://jsfiddle.net/Nk2Wy/1/。

該方法允許您添加任意數量的項目。如果它們不再適合在線，因爲它們太多或者因爲瀏覽器窗口很小，它們會顯示在更多行中。

如果您將width: 50px添加到a樣式，則所有這些項目都具有相同的寬度。現在，寬度取決於實際的文本。

看到問題（和答案）How to get rid of white space between css horizontal list items?以及。

因此，我再次更新小提琴：http://jsfiddle.net/Nk2Wy/3/。