将li浮动到网格模式中会留下不需要的间距

Question

在非常高的级别上，这是我的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的网格模式，但实际情况是：前六个项目完全按照我的意愿显示在3x2的网格中。然而，第七行本身显示在一行上，一直浮动到容器div的右侧，"行"的其余部分为空。然后模式在下一行继续。这是的图片

我的清单上正好有14项，所以我可以确认这种模式至少还会重复一次。我的问题是，是否有人能告诉我为什么只有第7个项目会这样，以及我能做些什么来修复它。

Answer 1

由于某些原因，您的第五项比您提供的屏幕截图中的其他项高出1px。这就是为什么第七项表现得像它一样。再次查看您的代码，看看您是否对第五项做了任何操作，使其高于其他项。