html - HTML/CSS リストを行にして、行ごとに 3 つのボックスを作成しますか?

Question

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

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

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

Answer 1

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/