優雅CSS定位爲間距

假設我有以下HTML：優雅CSS定位爲間距

<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 divs，這樣邊緣就沒有空間了。

現在我能想到的這樣做的幾種方法：

與jQuery，最後一個元素的右頁邊距設置爲0。
用CSS創建一個新類 - .MyClassForLastElement與marin-right設置爲0.
爲.Wrapper創建-5px的負right-margin。

我想知道是否有一個優雅和聰明的方式來做到這一點。

來源

2012-05-28 frenchie

一個 .MyClass元件

不知道是否有完美的解決方案，我用它來做到這一點：

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

我這樣做與first-child，因爲它在IE6-7支持，而last-child不支持。

來源

2012-05-28 00:37:34 tibo

我完全同意你的看法，甚至我會說：「最後的孩子」不工作無論是在IE8。因此，「第一孩子」將是更好的選擇，因爲在IE8和IE7的某些版本中工作，顯然，既不在如此討厭的IE6。 –

好的，非常酷，謝謝。 – frenchie

以下規則將提供所需的效果。第一個元素將沒有餘量，但實際上任何連續的元素都會有margin-left:5px;。

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

很好的支持跨瀏覽器，IE7 +

的+相鄰選擇器相匹配的元件是另一個元件的下一個同級，在上面的例子中它是下列另一.MyClass元件

來源

2012-05-28 00:36:29

如果您不希望最後一個孩子有margin-right，請使用last-child僞選擇器。

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

來源

2012-05-28 00:39:34 xbonez

+1，imo這是技術上最正確的答案（與我和其他人相比），但值得注意的是，它不會在IE8上工作，並且仍然代表相當大的觀衆 –

選擇爲這樣一個

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

來源

2012-05-28 05:53:24

優雅CSS定位爲間距

回答

相關問題