考虑以下HTML标记。在我测试的大多数浏览器中,第二个列表以不同的方式显示(每个列表项都缩进)。
这两个列表之间唯一的区别是CSS font-style属性,我不希望它改变列表布局。有没有关于这种行为的解释?
<!DOCTYPE html>
<html>
<head>
<style>
body {font-family: sans-serif}
span {float: left}
ul.bad span {font-style: italic}
</style>
</head>
<body>
<ul>
<li><span>foo</span></li>
<li><span>foo</span></li>
<li><span>foo</span></li>
<li><span>foo</span></li>
</ul>
<ul class="bad">
<li><span>foo</span></li>
<li><span>foo</span></li>
<li><span>foo</span></li>
<li><span>foo</span></li>
</ul>
</body>
</html>
span {float:left}
将会解决缩进问题。 - kei