顯示：塊不堆棧導航元素

我有點麻煩讓nav元素真正表現得像塊元素。我嘗試使用nav和標籤來代替通常的ul和li標籤。這沒有按計劃進行。我的菜單依次顯示，就好像display：block css沒有效果一樣。我想讓菜單堆疊起來，而不是一個接一個地出現。顯示：塊不堆棧導航元素

的HTML：

<nav id="mainmenu"> 
    <a href="#">Item1</a> 
    <a href="#">Item2</a> 
    <a href="#">Item3</a> 
<nav> 
<nav id="submenu"> 
    <a href="#">Item1</a> 
    <a href="#">Item2</a> 
    <a href="#">Item3</a> 
<nav>

的CSS：

nav{ 
    display: block; 
}

編輯：

這是我想它是設置，但我寧願漂浮在一個元素，所以我沒有得到與行內塊的間距問題。

http://jsfiddle.net/Kpv5H/2/

我還是不明白，爲什麼浮動標籤使所有一個標籤顯示內嵌在nav元素是塊？

http://jsfiddle.net/Kpv5H/4/

如果我unfloat他們正確對齊的標籤，但我失去的頂部和標籤的底部填充。如果我添加display：block來糾正所有標籤堆疊在彼此之上。如果嘗試使用浮點數來糾正該問題：將內容以內聯方式離開。

標籤上的內聯塊似乎可以解決它，但是我得到的是間距問題。

有沒有一種方法來堆疊導航元素並浮動a元素並仍然保留對元素的填充？

來源

2012-08-02 Molotch

是'了'標籤浮動？ – Utkanos 2012-08-02 09:23:32

請提供一個jsfiddle – Curt 2012-08-02 09:23:54

是的，a標籤是浮動的。 – Molotch 2012-08-02 09:24:53

編輯：* （後由OP添加更多細節） *

BY使用INLINE-BLOCK技術：

使用inline-block如果設置font-size:0px;在nav（有inline-block主容器元素），那麼你將不會得到額外的空間造成inline-block

SEE DEMO

如果沒有nav加入font-size:0px;它看起來就像這樣：

SEE DEMO

BY使用FLOAT技術：

你需要添加overflow:hidden和width，以防止你的nav元素浮動。

參見下面的CSS的變化：

nav { 
    display: block; 
    overflow:hidden; /* Added */ 
    width: 100%; /* Added */ 
} 

nav a { 
    float: left; 
    padding: 2em; 
}

SEE DEMO

來源

2012-08-02 09:25:58

這是我希望如何設置，但我寧願浮動一個元素，所以我沒有得到與行內塊間距問題 http://jsfiddle.net/Kpv5H/2/ 我仍然不明白爲什麼浮動一個標籤會導致所有的標籤顯示內聯導航元素是塊？ http://jsfiddle.net/Kpv5H/4/ 如果我展開標籤，它們對齊正確，但是我失去了標籤頂部和底部的填充。如果我然後將display：block添加到a標籤上，在彼此之上標記所有標籤堆棧。如果我添加浮動顯示內聯。 =）標籤上的內嵌塊似乎可以解決它，但是我得到的是間距問題。 – Molotch 2012-08-02 09:45:24

@Mototch：用可能的解決方案更新了我的答案。 – 2012-08-02 09:58:51

謝謝，我注意到我沒有關閉我的導航標籤。如果我做寬度屬性沒有必要，仍然需要使用溢出：雖然隱藏。 – Molotch 2012-08-02 12:53:02

顯示：塊不堆棧導航元素

回答

相關問題