<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)
思ったように機能しないのですが、なぜですか?
生活を楽にするプラグインはありますか?