使用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

如果您将图标包装在一个最大宽度小于图标元素宽度4倍的元素中(以处理不同浏览器之间的框模型差异)，这将解决所有问题。这是一个fiddle。

.icon{max-width:70px;}
.icon span {
    height: 20px;
    width: 20px;
    display: inline-block;
    background-color: red;
    border-style:dashed;
    border-width: 1px;
}
.icon span:nth-child(3n+3) {
    background-color:blue; /*just to highlight it*/
}

<div class='icon'>
<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>

Answer 2

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

Answer 3

这是working >> jsfiddle

<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>
<div class="icon"></div>
<div class="icon"></div>


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