Html 增长LI元素以适应固定宽度
如何以这样的方式增长Html 增长LI元素以适应固定宽度,html,html-lists,Html,Html Lists,如何以这样的方式增长li元素，即所有四个li元素消耗整个900像素的空间，并在元素之间添加一点间隙。为什么现在已经有了差距——我还没有定义 <html><head><title></title></head> <style type="text/css"> #box { width: 900px; border: solid 1px black; } #menu { display: block; posi
lili<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 & 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>
#方框{宽度：900px；边框：实心1px黑色；}
#菜单{
显示：块；
位置：相对位置；
宽度：900px；
保证金：0；
填充：0；
文本对齐：居中；
}
#菜单里{
显示：内联；
位置：相对位置；
保证金：0；
填充：0；
}
#菜单李a，#菜单李a：访问{
显示：内联块；
位置：相对位置；
填充：10px；
背景颜色：黄色；
文字装饰：无；
}
#菜单栏a:悬停，#菜单栏a:活动{
背景颜色：绿色；
文字装饰：无；
颜色：白色；
}
<div id="box">
<ul id="menu">
<li><a href="#">Mozilla Firefox & 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>
希望这一次解决了所有问题。内联块的行为怪异，因为它们呈现空白。项目之间显示的间距是代码中的新行字符。您可以删除新行字符，如我在下面的代码中所示（或者在这里）。如果您希望保持HTML的干净，并且不必删除空白，那么可以在元素上使用float left，而不是display:inline块，并在父元素上执行clearfix来设置高度
<div id="box">
<ul id="menu">
<li><a href="#">Mozilla Firefox & 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>