Question

我需要一个CSS 唯一解决方案来内联<a>个标记，但不能连续排成一行。例如，在这个JSFiddle http://jsfiddle.net/vLakfsLv/中，我想要两行两个黑色方块。

<div>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
</div>

a{
    width:100px;
    height:100px;
    display:inline-block;
    margin-right:20px;
    background-color:black;
}

显然，你可以通过用<a>包装<div>标签来实现这一点，但我需要一个CSS黑客攻击。我无法编辑HTML。

编辑：

请不要使用width完成此操作，因为width会不断变化。

Answer 1

为什么不显示：阻止和浮动：左边是<a>而一个明确：左边是正确的第n个孩子？

（你没有说你需要IE *支持）

Answer 2

将所有内容浮动到左侧，使第三个<a>标记（使用a:nth-child(3)）清除左侧的浮点数。 here's a fiddle

Answer 3

你可以给它们边距，特别是左边或右边，和/或给周围的div（四个块）提供一个设定的宽度。他们会适应那个。

Answer 4

试试这个解决方案：

div {
    width: 240px; /* 100 + 20 + 100 + 20 */
    font-size: 0; /* To avoid additional space */
}

Demo

如果你摆脱了元素之间的空格，你不需要font-size: 0：

<div><!--
    --><a></a><!--
    --><a></a><!--
    --><a></a><!--
    --><a></a><!--
--></div>

Answer 5

试试这个：

a{
    float: left;
}
a:nth-child(odd){
    clear: both;
}
div {
    overflow: hidden; /* Clear float */
}

Demo

Answer 6

你可以像这样使用浮动：

a{
    width:100px;
    height:100px;
    float: left;
    margin-right:20px;
    margin-bottom: 20px;
    background-color:black;
}
a:nth-child(3n){
    clear:both;
}

http://jsfiddle.net/vLakfsLv/8/

CSS显示：内联块对

6 个答案: