List-style和float不能在带有CSS的网格框上工作

Question

对我来说可能早上有点太早，但我在努力弄清楚我在这里做错了什么。

我有一个包含9个盒子的页面，我希望它们在一行上有3个，在另一行上有3个，在另一个上有3个。

看看这里：http://dev.tim-morgan.co.uk/other/Untitled-1.html

现在你可以看到，列表子弹正在显示，每个盒子看起来像是一个楼梯，因为我放入浮动：左;

我做错了什么想法？

由于

Answer 1

你需要：

• 将float: left从ul.tabs2 a移至ul.tabs2 li。
• 将overflow: hidden添加到.tabs2以清除浮动广告。

• 使用:nth-child将clear: left添加到每个3n+1 li，试试这个：

  ul.tabs2 li:nth-child(3n+1) {
      clear: left
  }
  

如果您需要支持Internet Explorer 8及更低版本（不支持nth-child），则可以使用http://selectivizr.com/，或者只为每个相关{{1}添加clear: left规则}。

Answer 2

您可能希望删除<li>上的默认样式，它们可能会干扰<a>中<li>的浮动。

我建议：

ul.tabs2 {
    list-style: none;
}

ul.tabs2 li {
    margin: 0;
    padding: 0;
}

为了连续三次，@thirydot’s answer看起来不错。如果您知道每个方框的宽度，可以在<a>上设置该宽度，然后在<ul>上设置宽度：

ul.tabs2 {
    width: 300px;
}

ul.tabs2 li a {
    width: 100px;
}

Answer 3

在你的CSS中添加这个

ul.tabs2 li {display:block;float:left;width:33%;margin:0 0 10px 0;padding:0;}

如果您不想要子弹，也可以将overflow:hidden和list-style:none添加到ul.tabs2。