还行吧：
<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>
编辑：似乎padding：6px 12px这里根本不起作用。但是将其移动到li中将使padding甚至不（在IE中），怎么办？
最佳答案
您的代码消失了，因为您在行内元素（没有换行，没有高度或宽度）中包含了块元素（带有换行符以及高度和宽度）。
回顾visual formatting model上的w3页面可能会有所帮助。
块级元素在视觉上被格式化为块-它们前后都有换行符。
内联元素不会形成新的内容块。它们在父块级元素的流之内。
当内联元素中包含block元素时，将创建匿名框（请参阅我链接的页面的9.2.1.1节），并且每种浏览器对这种情况的处理方式都不同。