容器中均衡边距div的好方法是什么？

Question

我要做的是在容器中居中x个div，并且在div的每一边都有一个14px的边距

但是，代码如下：

divs{
  display: inline-block;
  margin: 0 7px;
}

在两个外部div的外侧产生7px的余量，以及每个div内侧的均匀边距。打击这个通常是什么好习惯？我在考虑将一个'last'类应用到最后一个div并给它margin-right：0，而其余的有margin-right：14，但这看起来很麻烦。

小提琴：http://jsfiddle.net/ZMqbW/3/

Answer 1

我认为它不是很优雅，但容器上的text-align: center适用于此。

编辑：测试http://dabblet.com/gist/2793852

Answer 2

建议＃1

什么阻止您向容器添加填充？

.container {
    padding: 7px;
    overflow: hidden;
}
.divs {
    display: block;
    float: left;
    margin: 0 7px;
}

另请注意，Internet Explorer不太喜欢内联块，所以我在容器上使用float: left;和overflow: hidden;。

您可以try this fiddle查看它是否适合您。

建议＃2

另一个建议是使用像这样的伪类：

.divs:first-child {
    margin-left: 14px;
}
​.divs:last-child {
    margin-right: 14px;
}​​​​​​​​​​

请尝试this fiddle查看其实际效果。