8
<ul>
    <li>item1</li>
    <li>item1</li>
    <li>item1</li>
    <li>item1</li>
    <li>item1</li>
    <li>item1</li>
</ul>

各ボックスの幅が広いとしましょう。150pxしたがって、1 行あたりの幅の合計は450pxです。私がやろうとしているのは、リストが行ごとに 3 つのボックス (リスト要素) のみを許可するように自動的に作成し、互いに下に移動しないようにすることです。

試す前に尋ねるだけでなく、何かを試してみました!

私の試みがあります:

<div class="container">
    <ul>
        <li>hreyyy</li>
        <li>hreyyy</li>
        <li>hreyyy</li>
        <li>hreyyy</li>
        <li>hreyyy</li>
        <li>hreyyy</li>
    </ul>
</div>

.container {
    width: 450px;
}

.container ul li {
    width: 150px;
    height: 100px;
    background-color: red;
    float: left;
}

.container ul {
    display: inline;
}

結果:

画像
(出典:gyazo.com

思ったように機能しないのですが、なぜですか?

生活を楽にするプラグインはありますか?

4

1 に答える 1

15

UL をインライン オブジェクトとして表示するように設定する必要はありません。代わりに、次のようにします。

.container {
    width: 450px;
}
.container ul {
    padding: 0; /* remove default padding and all margins! */
    margin: 0;
    list-style-type: none; /* remove the • */
}
.container ul li {
    width: 150px;
    height: 100px;
    background-color: red;
    float: left;
}

結果: http://jsfiddle.net/f896G/

于 2013-08-21T21:36:41.430 に答える