如何使菜單項均勻分佈在菜單欄上

Question

我有一個網站，我正在努力..並想知道如何跨菜單項平均跨菜單欄。

我知道如何在技術上做到這一點，但我想確保它是正確的。

我希望能夠再添加一個菜單項，並仍然有它看起來正常或溢出正確等

該網站是http://phillysuburbanhomes.com

---

好了，所以我加了

.wpsight-menu li { 
    width:14%; 
    text-align:center 
} 

（更多菜單項被添加）

我的問題現在我S，即完整的菜單項不顯示現在

http://phillysubrubanhome.com - 你可以看到它在做什麼活

Answer 1

好了，所以我結合你的方法與此這個和它的工作：

.wpsight-menu li { 
    width:14%; 
    text-align:center 
} 

.wpsight-menu a { 
    display: inline-block; 
    margin: 0 5px 0 0; 
    text-decoration: none; 
} 

Answer 2

使用CSS給你的錨（a）相同的填充和利潤的左，右和li的百分比寬度，像這樣;

ul#main-menu { 
    width: 100%; 
} 

ul#main-menu li { 
    width: 20%; /* for 5 menu items */ 
    padding: 0; 
    margin: 0; 
    display: inline-block; 
} 

ul#main-menu li a { 
    padding: 0px 5px; 
    margin: 0px auto; 
    display: block; 
} 

並根據菜單項的數量更改li的寬度。

這應該做的伎倆！

Answer 3

目前有5個菜單項，即時通訊假設您將添加另一個菜單項，從而使它6菜單項。

容器的寬度是980px。將其分爲6個部分，達到163.33。我們需要給出寬度的百分比，即16.66％。

將每個li的寬度設置爲16.66％並居中對齊文本。

你的CSS是如下：

ul#main-menu li{ 
    width:16.66%; 
    text-align:center 
}