使用「margin：0 auto;」和無內部div的背景顏色

我想要一個使用自動左/右邊距的居中塊，但我也希望它具有背景色。由於背景顏色不適用於塊的邊緣區域，因此我使用背景顏色設置的塊，然後使用帶有自動邊距的內部塊。使用「margin：0 auto;」和無內部div的背景顏色

我不喜歡這樣，因爲它需要額外的標記。有沒有一種技術可以實現這一點，而只使用一個塊？

更新：澄清，我想只有一個塊，而不是兩個，實現同樣的事情;在下面的例子中，我想刪除內部div。我使用的是目前

裸露的骨頭代碼：

<section id="example"> 
    <div id="inner"> 
     <h1>Example</h1> 
     <p>Example content.</p> 
    </div> 
</section> 

<style> 
    #example { 
     background-color:#ccc; 
    } 
    #inner { 
     margin:0 auto; 
     padding:10px 0; 
     width:500px; 
     background:white; 
    } 
</style>

找不到任何搜索網站或谷歌。

由於提前，奈傑爾

來源

2013-07-27 SuperDuperApps

這是令人困惑的問題。你應該模擬一個jsfiddle.net來解釋問題所在。儘管閱讀了5次以上，但我實際上無法確定您的問題。（也許你只是想要框大小） – Layke

據我所知，奈傑爾希望一個元素少（#inner），但是相同的視覺效果 – Martijn

是的，正如Martinijn所說。我想要實現同樣的事情，而不必使用兩個塊。在這種情況下，一個部分和一個內部div。對不起，不清楚，會更新問題來澄清。 – SuperDuperApps

因爲你想在div＃內爲中心，這將永遠是父母。在這種情況下，另一個元素#portfolio，但它也可以是正文。這個解決方案完全可以接受。

你可以嘗試添加負邊距和一些填充，但是你會分配一些複雜的東西。你現在所擁有的東西，一個滿足寬度並給出完整背景色的元素，以及一個定位在中心的元素

來源

2013-07-27 14:09:12 Martijn

我也嘗試過'padding：0 auto;'只是爲了它的樂趣，但那是行不通的。本來會很有趣的 – Martijn

是的嘗試過自動填充，太遺憾了，它不起作用，這將是一個不錯的解決方案。感謝你的回答。 – SuperDuperApps

對不起第二條評論，但你說得很好，我所用的並不是真的無關緊要，它確實有意義，這裏有兩個街區。會咀嚼的。我只是不喜歡純粹出於造型目的的標記。這似乎應該可以實現一個街區。 – SuperDuperApps

如果您有一組固定的塊元素，您可以設置邊距對所有#example的孩子。 Here是一個jsFiddle。

問題是你保存在HTML標記中，你浪費在CSS中，並且假設你只有塊兒童。例如，添加一個<span>標籤會打破這個流程，它們本身需要包裝在一個塊容器中。

HTML

<section id="example"> 
     <h1>Example</h1> 
     <p>Example content.</p> 
</section>

CSS

#example { 
     background-color:#ccc; 
} 
#example > * { 
    width: 200px; 
    margin: 0 auto; 
}

來源

2013-07-27 14:13:09 CodingIntrigue

這將工作，如果這是所有的內容將永遠在這裏。如果他得到更多的HTML，他將需要重寫它現在的情況。我喜歡這個想法 – Martijn

準確（*如果你有一組固定的元素*）。 OP沒有更好的解決方案，在我看來，只是其他選擇。 – CodingIntrigue

我也喜歡這個想法，雖然對於你建議的理由不太理想，不得不爲所有類型的兒童提供所有額外的CSS。 – SuperDuperApps

使用「margin：0 auto;」和無內部div的背景顏色

回答

相關問題