排列如圖像的div？

我想要一個導航欄（#nav），並且每個導航項都是一個div（#nav div）。但是，這並不奏效。這裏就是我想：排列如圖像的div？

#nav { 
    background: url("navbg.png"); /* navbg.png is 1x40 pixels */ 
    height: 40px; 
    width: 100%; 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    text-align: center; 
} 
#nav div { 
    width: 200px; 
    height: 40px; 
    background: url("Selected.png"); /* Selected.png is 200x40 pixels */ 
    text-align: center; 
}

當我做到這一點與在#nav DIV兩個div，一個顯示在左邊，一個是下面。當我這樣做，但在#nav divdisplay: inline;，它的中心，但div的沒有任何背景，並在兩個div文本顯示並排側。

我想的div圖像等工作，受着text-align: center;並顯示出來並排側。

來源

2012-12-21 tkbx

您有使用DIV的原因，而不是最常用的使用UL的UL方法嗎？ –

嘗試display: inline-block或float: left上#nav div

來源

2012-12-21 15:54:33 eliah

直列塊不處於謹慎http://caniuse.com/#search=inline-block – Ray

@RayHughes即使DOCTYPE tkbx

doctype只是告訴瀏覽器期望什麼類型的文檔（XHTML HTML等）而不是如何呈現它。在HTML 5中，DTD不是必需的。另外，我建議你檢查一下hml鍋爐板。它有很多跨瀏覽器修補程序 – Ray

的display: inline-block樣式規則會做的伎倆，但它也有一些缺點。有關更多詳細信息，請參閱CSS display: inline-block: why it rocks, and why it sucks。

我也可能會建議使用列表，而不是申報單的導航元素。這是一個常見的策略，可以產生（希望）更清晰的標記。

來源

2012-12-21 15:55:16

我建議在外部div #div上使用clearfix解決方案。然後float:left上的所有#nav div孩子。

來源

2012-12-21 15:57:45 ianbeks

排列如圖像的div？

回答

相關問題