：nth-​​child（3n）：在cleafix无法在CSS中工作之后

Question

您好我已经尝试了以下内容，我认为应该是有效的CSS并且它不起作用（使用Google Chrome测试）。

<ul>
<li><a href="...">bla</a></li>
<li><a href="...">bla</a></li>
<li><a href="...">bla</a></li>
<li><a href="...">bla</a></li>
<li><a href="...">bla</a></li>
</ul>

CSS：

ul li {
    float:left;
}

ul li:nth-child(3):after {
    content:"";
    display:table;
    clear:both;
}

浮动列表元素应该在响应式设计中的列表中的每个第三个元素之后开始一个新行。你有解决方案的建议吗？这不应该有用吗？

Answer 1

请按以下方式申请。

 ul li:nth-child(4n) {clear:both;}

DEMO

Answer 2

必须在容器元素上使用clear fix技术，而不是浮动元素。它设计用于固定容器的高度坍塌。

要回答这个问题 - 您可以清除每行第一个孩子的浮动（3项）。

ul li:nth-child(3n+1) {
    clear: both;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
ul:after { /*where you apply clearfix hack*/
    content: "";
    display: table;
    clear: both;
}
ul li {
    float: left;
    margin-right: 5px;
}
ul li:nth-child(3n+1) { /*where you clear the float*/
    clear: both;
}

<ul>
    <li><a href="#">bla</a></li>
    <li><a href="#">bla</a></li>
    <li><a href="#">bla</a></li>
    <li><a href="#">bla</a></li>
    <li><a href="#">bla</a></li>
    <li><a href="#">bla</a></li>
    <li><a href="#">bla</a></li>
    <li><a href="#">bla</a></li>
    <li><a href="#">bla</a></li>
    <li><a href="#">bla</a></li>
    <li><a href="#">bla</a></li>
    <li><a href="#">bla</a></li>
</ul>
-clearfixed-

Answer 3

试试这个：

ul li:nth-child(3n+1) {clear:both;}