Question

如何增加li元素的方式，所有四个li元素都消耗完整的900像素空间并在元素之间添加一点间隙。为什么现在已经存在差距 - 我没有定义？

<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>

Answer 1

内联块表现奇怪，因为它们呈现空白。项目之间显示的差距是代码中的新行字符。你可以删除我在下面的代码中显示的新行字符（或者在这个小提琴http://jsfiddle.net/UyQEK/）。如果要保持HTML干净，而不必删除空格，请在元素上使用float left而不是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元素应用clearfix。

希望这次能解决所有问题。

增长LI元素以适应固定宽度

1 个答案: