: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

必须在容器元素上使用明确的修复技术，而不是在浮动元素上。专为修复容器高度塌陷而设计。

要回答这个问题 - 您可以清除每行第一个子项（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;}

:nth-child(3n):cleafix 后 CSS

:nth-child(3n):after cleafix not working in CSS

css

css-selectors

clearfix