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>​

リーを水平に均等に配置したいと思います。私はコンパスを使用しており、以下を適用しています:

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

結果のHTML/CSS コードと出力を jsFiddle で確認してください。李の寸法が合っているように見えるにもかかわらず...

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

... 4 番目のブロックが次の行にプッシュされます。

float: left;を追加した場合、li は水平方向にのみ収まります。詳細は、結果の HTML/CSS コードと jsFiddle の出力を参照してください。

誰かがこれで何が起こっているのか説明できるかどうか疑問に思っていますか? float: left; と思ったでしょう。インラインブロックliの寸法が適合するため、必要ではなかったでしょうか? どうもありがとうございました。

4

1 に答える 1

1

display: inline-block は周囲の空白を考慮します。したがって、li要素間の改行が幅に寄与しています

修正例: http://jsfiddle.net/BL2Wq/8/

編集: この問題に関する詳細な記事:インライン ブロック要素間のスペースとの戦い

于 2012-09-14T07:59:33.257 に答える