将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网格模式，但实际发生的是：前3个项目在3x2网格中完全按照我的要求显示。但是，第七行显示在自身的一行上，一直浮动到容器div的右侧，其余的“行”为空。然后该模式在下一行继续。 Here's a picture of what it looks like

我的列表中有14个项目，因此我可以确认此模式至少重复一次。我的问题是，如果有人能告诉我为什么只有第7项表现出来，以及我可以做些什么来修复它。

Answer 1

由于某种原因，您的第五项比您提供的屏幕截图中的其他项高1px。这就是导致第七项表现得像它的原因。再看看你的代码，看看你是否对导致它高于其他项目的第五项做了任何事情。