非常に高いレベルでは、これは私のHTMLです。
<ul>
<li>Item1</li>
<li>Item2</li>
...
<li>Item21</li>
</ul>
これが私のCSSです。
li {
display: block;
float: left;
margin: 0.3em;
padding: 2px;
max-width: 10em;
min-width: 10em;
min-height: 12em;
border: 1px solid rgb(230, 230, 230);
background-color: rgb(250, 250, 250);
}
私の意図はリストアイテムを3x7グリッドパターンに配置することですが、実際に起こることはこれです。最初の6つのアイテムは、3x2グリッドで希望どおりに表示されます。ただし、7番目はそれ自体の行に表示され、コンテナdivの右端まで浮動し、残りの「行」は空白になります。その後、パターンは次の行に続きます。これがその様子の写真です
私のリストには正確に14個のアイテムがあるので、このパターンが少なくとももう一度繰り返されることを確認できます。私の質問は、7番目のアイテムだけがこのように動作する理由と、それを修正するために何ができるかを誰かに教えてもらえるかどうかです。