浮动内联块和非浮动块之间的布局差异

时间:2012-09-14 07:55:54

标签: html css-float compass-sass css

我正在尝试在容器中实现4个水平内联块的简单布局。

HTML:

<div id="wrapper">
    <ul id="myList">
        <li><p>1</p></li>
        <li><p>2</p></li>
        <li><p>3</p></li>
        <li><p>4</p></li>        
    </ul>
</div>​

我想将李的水平放置。我正在使用Compass并应用以下内容:

ul#mylist {
    @include reset-box-model;
    @include inline-block-list-container;
    margin: 0px auto;
    height: 180px;
    width: 640px;

    > li { 
        @include reset-box-model;
        @include inline-block-list-item(0px);
        width: 130px;
        height: 130px;
        padding: 10px;
        margin: 0px 5px;
    }
}

请参阅resultant HTML/CSS code and output on jsFiddle。尽管李的尺寸看起来很合适......

(130px + (2 * 5px) + (2 * 10px) = 640px)) * 4 = 640px

......第4块被推到下一行。

如果我向li添加 float:left; ,则li只能水平放置 - 请参阅resulting HTML/CSS code and output on jsFiddle

只是想知道是否有人可以解释这是怎么回事?我原以为浮动:左;因为内联块li的尺寸合适,所以没有必要吗?非常感谢你。

1 个答案:

答案 0 :(得分:1)

display:inline-block将考虑周围的任何空白区域。因此,li元素之间的换行符会影响宽度

修复示例:http://jsfiddle.net/BL2Wq/8/

修改:关于此问题的深入文章:Fighting the Space Between Inline Block Elements