1

如何以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>
4

1 回答 1

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。

希望这次能解决整个问题。

于 2013-03-07T19:56:12.073 回答