如何避免与每行的第一个div间隔

Question

我DIVs彼此side by side＆amp;但只有fourth DIV出现在第一个row＆amp;其他人也会转移到下一个row。

我希望每个row first div不占用left side的空格但未发生。这是我的代码

http://jsfiddle.net/25pwG/

我知道我可以通过向class提供new row DIV手册来实现这一目标，但我不想这样做。我想用更少的css＆amp;我不想改变我的markup

注意：我想要能力直到IE8。

提前致谢：）

更新：

http://jsfiddle.net/25pwG/8/

首先，.parent div是common class，其他部分也使用了parent DIVs＆amp;根据设计的第二件事row last div触及{{1}}因此，右侧没有空间。

Answer 1

建议A：

将margin-left:-16px添加到父

演示：http://jsfiddle.net/25pwG/1/

建议B：

在内部div上使用margin-right: 16px，而不是margin-left

演示：http://jsfiddle.net/25pwG/4/

建议C：

如果父div宽度是固定的，您可以删除每个4th child上的边距，如下所示：

.feature:nth-child(4n){
    margin-right:0px;
}

演示：http://jsfiddle.net/25pwG/15/

建议d：

将内部div包装在一个包装器中，并将其设置为比父div

更宽

演示：http://jsfiddle.net/25pwG/17/

Answer 2

避免使用负边距和填充。在要素类中使用margin-right:16px并删除 .feature + .feature 类。

所以你的CSS将是

.parent{
    width:480px;
}
.feature{
    width:100px;
    height:100px;
    background:red;
    display:inline-block;  
    margin-bottom:10px;
    margin-right:16px;
}

请参阅此http://jsfiddle.net/25pwG/7/

Answer 3

.parent{
    width:480px;
    text-align: center;
}
.feature{
    width:100px;
    height:100px;
    background:red;
    display:inline-block;  
    margin:0 6px 10px;
}

我建议尝试这个。使用负值可能会在以后导致一些问题。所以尽量避免使用它。

Answer 4

这很简单，只需从

更改

.feature + .feature { margin-left:16px; } /*Remove this*/

到

.feature { margin-right:16px; }