0

我正在尝试做的是在一个容器中将 x 数量的 div 居中，并在 14px 的 div 的每一侧都有一个边距

但是，像这样的代码：

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

将在两个外部 div 的外侧产生 7px 的边距，同时在每个 div 的内侧产生均匀的边距。通常有什么好的做法来解决这个问题？我在想将“最后一个”类应用于最后一个 div 并给它 margin-right: 0，而其余的有 margin-right: 14，但这看起来很乱。

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

4

2 回答 2

1

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

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

于 2012-05-26T12:50:53.300 回答
0

建议 #1

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

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

另请注意，Internet Explorer 不太喜欢 inline-block，所以我在容器上float: left;结合使用。overflow: hidden;

你可以试试这个小提琴，看看它是否适合你。

建议#2

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

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

试试这个小提琴看看它的实际效果。

于 2012-05-26T12:40:59.440 回答