強制寬度菜單項水平列表（CSS）

如何強制水平列表（菜單）中的所有項目的寬度相同？強制寬度菜單項水平列表（CSS）

這是我的CSS代碼至今：

a { text-decoration:none; } 
#navlist ul { margin:0; padding:0; list-style-type:none; } 
#navlist ul li { display:inline; } 
#navlist li a { 
    padding:10px; 
    margin:2px; 
    background:grey; 
    color:white; 
} 
#navlist li a:hover { 
    color:white; 
    background:black; 
}

編輯：

現在它的工作原理是第3行改變成（感謝@Gaby）：

#navlist ul { margin:0; padding:0; list-style-type:none; } 
#navlist ul li { float:left; text-align:center; } 
#navlist ul li a { text-decoration:none; display:block; width:120px; }

來源

2010-11-03 waanders

浮動的元素，並使它們代替inline

#navlist ul { margin:0; padding:0; list-style-type:none; overflow:auto; } 
#navlist ul li { display:block;width:100px;float:left; }

你可能想使a是block爲好，填補了li並使其所有可點擊..

來源

2010-11-03 10:47:36

它不爲我工作（與IE8測試），但你的選擇的話給了我線索。現在，它的工作，看到我除了以上questin – waanders 2010-11-03 12:53:28

@waanders，工作正常我在http://jsfiddle.net/vgcjU/ – 2010-11-03 14:28:14

是的，但這是因爲'display：block' for'#navlist li a' 。我沒有在第一次嘗試時加上這一點 – waanders 2010-11-04 08:52:12

強制寬度菜單項水平列表（CSS）

回答

相關問題