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 网格模式,但实际发生的是:前六个项目完全按照我想要的方式显示,在 3x2 网格中。然而,第七个显示在其自身的一行上,一直浮动到容器 div 的右侧,“行”的其余部分为空白。然后该模式在下一行继续。这是它的样子

我的清单正好有 14 项,所以我可以确认这种模式至少再重复一次。我的问题是,是否有人能告诉我为什么只有第 7 项会有这种行为,以及我能做些什么来解决它。

4

1 回答 1

0

出于某种原因,您提供的屏幕截图中的第五项比其他项高 1 像素。这就是导致第七项行为如此的原因。再次查看您的代码,看看您是否对第五项进行了任何操作,导致它高于其他项。

于 2012-09-16T20:11:18.347 回答