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 のスペースを空けて 1 行に配置されます。問題は、最後に 5px のスペースもあるということです。.MyClassエッジにスペースがないように、Wrapper で実際に div をラップしたいと考えています。

今、私はこれを行ういくつかの方法を考えることができます:

  • jquery で、最後の要素の右マージンを 0 に設定します。
  • CSS を使用して新しいクラスを作成します - 0.MyClassForLastElementに設定します。marin-right
  • right-marginの -5pxのネガを作成し.Wrapperます。

それを行うためのエレガントで賢い方法があるかどうか疑問に思っていました。

4

4 に答える 4

4

完璧な解決策があるかどうかはわかりませんが、私はそれを行うために使用します：

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

first-childIE6-7 ではサポートされていますが、サポートされていないため、 with で行い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 に答える