Html 将li浮动到栅格图案中会留下不需要的间距

在非常高的层次上，这是我的HTML：

<ul>
  <li>Item1</li>
  <li>Item2</li>
  ...
  <li>Item21</li>
</ul>

我的意图是将列表项排列成3x7网格模式，但实际情况是：前六个项在3x2网格中完全按照我的要求显示。但是，第七行显示在其自身的一行上，一直浮动到容器div的右侧，其余的“row”为空白。然后，模式在下一行继续

---

我的列表正好有14项，因此我可以确认此模式至少重复一次。我的问题是，是否有人能告诉我为什么只有第7项出现这种情况，以及我能做些什么来修复它。

出于某种原因，您的第五项比您提供的屏幕截图中的其他项高1倍。这就是导致第七项行为与之类似的原因。再次查看您的代码，看看您是否对第五项做了任何操作，导致其高于其他项。

问题出在哪里？您应该包含整个CSS，因为当所提供的代码放入HTML文件时，它可以正常工作。所以很可能是其他样式影响了它。我想可能只是在我的浏览器样式中，但我不确定是什么导致了它。我不确定我在做什么，但我会仔细看看-谢谢！

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);
}