1

我正在尝试在容器中实现 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>​

我想将 li 水平均匀地铺开。我正在使用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;
    }
}

在 jsFiddle 上查看生成的HTML/CSS 代码和输出。尽管 li 的尺寸看起来很合适...

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

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

如果我添加一个浮点数，li 只适合水平：left; 到 li's-在 jsFiddle 上查看生成的 HTML/CSS 代码和输出。

只是想知道是否有人可以解释这是怎么回事？我会认为 float: left; 既然内联块 li 的尺寸合适，就没有必要了吗？非常感谢你。

4

1 回答 1

1

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

固定示例：http: //jsfiddle.net/BL2Wq/8/

编辑：关于该问题的深入文章：与内联块元素之间的空间作斗争

于 2012-09-14T07:59:33.257 回答