将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元素增长到适合固定宽度

回答

相关问题