0

假设我有以下 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 真正包装.MyClassdiv，这样边缘就没有空间了。

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

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

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

4

4 回答 4

4

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

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

我这样做是first-child因为它在 IE6-7 中受支持，但last-child不支持。

于 2012-05-28T00:37:34.520 回答
3

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

.MyClass:last-child {
   margin-right: 0px;
}
于 2012-05-28T00:39:34.303 回答
2

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

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

跨浏览器得到很好的支持，IE7+

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

于 2012-05-28T00:36:29.237 回答
0

像这样的选择器

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

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

于 2012-05-28T05:53:24.197 回答