如何對齊導航菜單中的列表項？

在this例子中，我使用下面的風格：如何對齊導航菜單中的列表項？

ul.menu li { 
    float:left; 
    padding: 17px 35px 0px 35px; 
    font-family: Tahoma, Arial, sans-serif; 
    font-size: 13px; 
    font-weight:bold; 
    height:20px; 
    background: url("sep2.png") no-repeat; 
}

菜單未對齊。它應該平等對齊（沿着整個導航欄）。我該怎麼做？

來源

2011-10-27 DrStrangeLove

整個菜單有一個固定的寬度。

您有6個菜單項（li）。

除以它由6至每個L1設置爲相同的寬度

來源

2011-10-27 21:45:44 galchen

嘗試增加顯示：塊;使li元素塊級元素。我就是這麼做的。

來源

2011-10-27 21:47:46 michaeljdennis

你可以刪除填充，居中對齊每個li的文本並添加一個固定寬度。如果你想爲<a>標籤更大的點擊區域把寬度/文本對齊上，而不是使之display: block

ul.menu li { 
    float:left; 
    padding-top: 0; 
    font-family: Tahoma, Arial, sans-serif; 
    font-size: 13px; 
    font-weight: bold; 
    height:20px; 
    text-align: center; 
    width: 142px; 
    background: url("sep2.png") no-repeat; 
}

：

試試這個。

來源

2011-10-27 21:57:10 nheinrich

您目前的設計並沒有考慮菜單項名稱的長度不同，因爲您當前的項目名稱完全相同，所以您沒有看到此項，也只有導航中的文本是可點擊的。我會建議這樣做：

擺脫<li>中的填充。
將text-align:center財產添加到<li>。
在<a>中添加width:142px（大約）。

這給了你可以點擊整個塊的好處。

來源

2011-10-27 21:58:06 Sam

如何對齊導航菜單中的列表項？

回答

相關問題