4

非常に高いレベルでは、これは私の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番目のアイテムだけがこのように動作する理由と、それを修正するために何ができるかを誰かに教えてもらえるかどうかです。

4

1 に答える 1

0

何らかの理由で、5番目のアイテムは提供したスクリーンショットの他のアイテムよりも1px高くなっています。これが、7番目のアイテムがそのように動作する原因です。コードをもう一度見て、5番目の項目に対して他の項目よりも高くなるようなことをしていないかどうかを確認してください。

于 2012-09-16T20:11:18.347 に答える