水平和垂直列表项之间的空间看起来不同,即使两种布局的边距、填充、高度和宽度完全相同。我希望它们相同,我知道我可以手动调整边距或填充,但为什么它们不一样,有没有一种简单的方法可以使它们保持一致?谢谢。
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;
}
最佳答案
垂直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 */
}
关于html - 水平和垂直列表项之间的不同间距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22201594/