Question

没关系：

<html>
<head>
<title>tabs</title>
<style>
li { 
    display:inline;
    margin:0 90px;
    background:#777777 none repeat scroll 0 0;
}

li a {
    padding:6px 12px;
    color:#FFFFFF;
    text-decoration:none;
    font-weight:bold;
}
</style>

</head>
<body>
<div id="tabs">
    <div class="nav">
        <ul>
            <li><a href="test">test</a></li>
            <li><a href="test">test</a></li>
            <li><a href="test">test</a></li>
            <li><a href="test">test</a></li>
            <li><a href="test">test</a></li>
        </ul>
    </div>
</div>
</body>
</html>

但如果我将li a更改为display:block，那么一切都会消失。为什么呢？

<html>
<head>
<title>tabs</title>
<style>
li { 
    display:inline;
    margin:0 90px;
    background:#777777 none repeat scroll 0 0;
}

li a {
    padding:6px 12px;
    color:#FFFFFF;
    text-decoration:none;
    font-weight:bold;
    display:block;
}
</style>

</head>
<body>
<div id="tabs">
    <div class="nav">
        <ul>
            <li><a href="test">test</a></li>
            <li><a href="test">test</a></li>
            <li><a href="test">test</a></li>
            <li><a href="test">test</a></li>
            <li><a href="test">test</a></li>
        </ul>
    </div>
</div>
</body>
</html>

编辑：似乎填充：6px 12px这里根本不工作。但是将它移动到li会使填充不均匀（在IE中），怎么样？

Answer 1

您的代码消失了，因为您在内联元素中有块元素（带换行符，高度和宽度）（没有换行符，没有高度或宽度）。

查看visual formatting model上的w3页面可能有所帮助。

块级元素在视觉上被格式化为块 - 它们之前和之后都有换行符。

内联元素不会形成新的内容块。它们位于父块级元素的流中。

如果在内联元素中有块元素，则会创建匿名框（请参阅我链接的页面的第9.2.1.1节），每个浏览器都会以不同的方式处理这种情况。

Answer 2

尝试浮动＆lt; li＆gt;离开而不是内联显示。

Answer 3

在li a定义中更改颜色。 E.g：

li a {
    padding:6px 12px;
    color:red;
    text-decoration:none;
    font-weight:bold;
    display:block;
}

Answer 4

li { 

    margin:0 90px;
    background:#777777 none repeat scroll 0 0;
}


li a {
display:block;    
padding:6px 12px;
    color:#FFFFFF;
    text-decoration:none;
    font-weight:bold;
}

为什么一切都随着显示：块？

4 个答案: