Question

我正在尝试在容器中实现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的尺寸合适，所以没有必要吗？非常感谢你。

Answer 1

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

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

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

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

1 个答案: