將LI元素增長到適合固定寬度

如何以這種方式增長li元素，即所有四個li元素都消耗完整的900像素空間並在元素之間添加一點點間隙。爲什麼現在已經有一個缺口 - 我沒有定義？將LI元素增長到適合固定寬度

<html><head><title></title></head> 
<style type="text/css"> 
#box { width: 900px; border: solid 1px black; } 

#menu { 
    display: block; 
    position: relative; 
    width: 900px; 
    margin: 0; 
    padding: 0; 
    text-align: center; 
} 

#menu li { 
    display: inline; 
    position: relative; 
    margin: 0; 
    padding: 0; 
} 

#menu li a, #menu li a:visited { 
    display: inline-block; 
    position: relative; 
    padding: 10px; 
    background-color: yellow; 
    text-decoration: none; 
} 

#menu li a:hover, #menu li a:active { 
    background-color: green; 
    text-decoration: none; 
    color: white; 
} 

</style> 
<body> 

<div id="box"> 
    <ul id="menu"> 
     <li><a href="#">Mozilla Firefox &amp; Thunderbird</a></li> 
     <li><a href="#">OpenOffice</a></li> 
     <li><a href="#">Microsoft Office Visio</a></li> 
     <li><a href="#">Apache OpenOffice 3.0.0</a></li> 
    </ul> 
</div> 

</body> 
</html>

來源

2013-03-07 mythbu

行內塊的行爲很奇怪，因爲它們呈現空白。項目之間顯示的差距是代碼中的新行字符。您可以刪除下面代碼中顯示的新行字符（或在此小提琴http://jsfiddle.net/UyQEK/處）。如果你想保持HTML清潔，並且不必去除空白，可以在元素上使用float而不是display：inline-block，然後在父級上執行clearfix來設置高度。

<div id="box"> 
    <ul id="menu"> 
     <li><a href="#">Mozilla Firefox &amp; Thunderbird</a></li><li><a href="#">OpenOffice</a></li><li><a href="#">Microsoft Office Visio</a></li><li><a href="#">Apache OpenOffice 3.0.0</a></li> 
    </ul> 
</div>

編輯製造忘記檢查，以確保我回答了全部問題的經典錯誤。我更新了小提琴http://jsfiddle.net/UyQEK/1/以顯示實際答案，以利用整個酒吧，而不是擺脫你的空間。該解決方案的基礎是浮動元素，並給他們每個25％的寬度和應用一個清晰的ul元素。

希望這次能夠解決整件事情。

來源

2013-03-07 19:56:12 Clayton

將LI元素增長到適合固定寬度

回答

相關問題