水平和垂直列表项之间的间距不同

时间:2014-03-05 15:10:22

标签: html css

水平和垂直列表项之间的空间显示不同,即使通过边距,填充,高度和宽度对于两个布局也完全相同。我希望它们是相同的,我知道我可以手动调整边距或填充,但为什么它们不一样,是否有一种简单的方法来保持它们的一致性?感谢。

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;
}

在此处查看结果:http://jsfiddle.net/bingjie2680/3ZbkQ/

2 个答案:

答案 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 */
}

Updated fiddle

答案 1 :(得分:1)

阅读本文:http://www.w3.org/TR/CSS21/box.html#collapsing-margins 您的垂直边距会折叠,导致您的元素彼此“下一个”。 与此不同的是,水平边距不会崩溃。