html - 使用CSS连续创建三个图标

Question

我有三个图标需要放在一行中。如何使用 CSS 实现此目的？

这是 HTML:

<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>

接下来是我已有的 CSS:

.icon {
    min-height: 20px;
    max-width: 20px;
    min-width: 20px;
    display:inline-block;
    background-color: red;
    border-style:dashed;
    border-width: 1px;
}
.icon:nth-child(3n+0) {
    clear:right;
    display:block;
}

上面的代码在一行中生成两个图标，然后在下一行生成一个图标，然后在下一行生成两个图标，依此类推。

我希望的是，每行三个图标。

Answer 1

为什么不在父元素上使用固定 width 的 float: left？ fiddle