3

我有三个图标需要放在一行上。如何使用 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;
}

上面的代码导致一行上有两个图标，然后下一行有一个图标，下一行有两个图标，依此类推。

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

4

4 回答 4

2

为什么不在父元素上使用float: leftwith fixed ？小提琴width

于 2013-03-06T14:19:15.133 回答
2

这是工作>> 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;
}
于 2013-03-06T15:00:27.407 回答
1

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

.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>
于 2013-03-06T15:01:53.470 回答
0

使用3n+1. 在 CSS 中，元素索引是从 1 开始的。

旁注：有什么关系min-width:20px; max-width:20px？为什么不直接放width:20px？

于 2013-03-06T14:17:06.027 回答