html - 优雅的 CSS 间距定位

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。
• 为 .Wrapper 创建 -5px 的负 right-margin。

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

Answer 1

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

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

我使用 first-child 来实现它，因为它在 IE6-7 中受支持，而 last-child 不支持。