Question

假设我有以下HTML：

<div id="Wrapper">
    <div class="MyClass"></div>
    <div class="MyClass"></div>
    <div class="MyClass"></div>
    <div class="MyClass"></div>
    <div class="MyClass"></div>
</div>

和以下CSS：

.MyClass {
    float: left;
    margin-right: 5px;
}

所有这些元素将被放置在一条线上，空间介于5px之间。问题是最后还会有5px的空间。我想让Wrapper真正包装.MyClass div，以便边缘没有空间。

现在我可以想到几种方法：

使用jquery，将最后一个元素的右边距设置为0。
使用CSS创建一个新类 - .MyClassForLastElement，marin-right设置为0。
为right-margin创建-5px的负.Wrapper。

我想知道是否有一种优雅而聪明的方式。

Answer 1

不确定是否有完美的解决方案，我会这样做：

.MyClass {
    float: left;
    margin-left: 5px;
}
.MyClass:first-child {
    margin-left: 0;
}

我使用first-child执行此操作，因为IE6-7支持它，而last-child则不支持。{/ p>

Answer 2

如果您不希望最后一个孩子margin-right使用last-child伪造选择器。

.MyClass:last-child {
   margin-right: 0px;
}

Answer 3

以下规则将提供所需的效果。第一个元素没有边距，但实际上任何连续元素都有margin-left:5px;。

.MyClass {
    float: left;
    margin: 0;
}
.MyClass + .MyClass {
    margin-left: 5px;
}

浏览器支持得很好，IE7 +

+邻近选择器匹配作为另一个元素的下一个兄弟的元素，在上面的示例中，它是跟随另一个.MyClass元素的.MyClass元素

Answer 4

选择器就像这样

.MyClass + .MyClass {
    margin-left: 5px;
}

更多信息http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors

优雅的CSS定位间距

4 个答案: