水平和垂直列表项之间的空间显示不同,即使通过边距,填充,高度和宽度对于两个布局也完全相同。我希望它们是相同的,我知道我可以手动调整边距或填充,但为什么它们不一样,是否有一种简单的方法来保持它们的一致性?感谢。
HTML
<ul class="horizontal">
<li></li>
<li></li>
<li></li>
</ul>
<div class="clear"></div>
<ul class="vertical">
<li></li>
<li></li>
<li></li>
</ul>
CSS
ul li {
padding: 0;
margin: 10px;
width: 13px;
height: 13px;
background: #333333;
border-radius: 50%;
}
.horizontal li {
float: left;
}
答案 0 :(得分:4)
垂直li
的边距为collapsing。你可以通过以下方式解决这个问题:
.vertical li {
float: left; /*a floated box's margin does not collapse with any other box */
clear: left; /* Push each succeeding li to a new line,
though not needed on the first */
}
答案 1 :(得分:1)
阅读本文:http://www.w3.org/TR/CSS21/box.html#collapsing-margins 您的垂直边距会折叠,导致您的元素彼此“下一个”。 与此不同的是,水平边距不会崩溃。