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

水平和垂直列表项目之间的间隔显示不同，即使两个布局的边距，填充，高度和宽度完全相同。我希望他们是相同的，我知道我可以手动调整边距或填充，但他们为什么不一样，有没有简单的方法来保持它们的一致性？谢谢。水平和垂直列表项目之间的不同间距

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/

来源

2014-03-05 bingjie2680

我猜的东西做保证金崩溃。如果你删除了保证金，你可以得到：http://jsfiddle.net/Paulie_D/3ZbkQ/1/ –

就像上面评论中提到的那样，它与收缩边距有关。在[CSS-Tricks]（http://css-tricks.com/almanac/properties/m/margin/） –

btw上阅读关于边距（和折叠）的更多信息时，将“float：left”样式应用于水平列表中，这意味着2个列表不同，与您所描述的不一样。这就是你的问题发生的原因。列表是float元素，而另一个是内联元素，float元素不受margin-collapsing规则的影响。 –

垂直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

来源

2014-03-05 15:22:38 Adrift

不错的解决方案。谢谢。 – bingjie2680

@ bingjie2680：没问题。 – Adrift

阅读：http://www.w3.org/TR/CSS21/box.html#collapsing-margins 您的垂直边距正在崩溃，导致你的元素是'下一个“。与此不同，水平边距不会塌陷。

来源

2014-03-05 15:19:16 Jenson

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

回答

相关问题