我的CSS菜單有什麼問題？

結果是：http://img198.imageshack.us/img198/746/93502273.jpg 我的CSS菜單有什麼問題？

您可以在側面看到明顯的「空白」。

我：

<div id="nav"> 
    <ul> 
     <li id="n-home"><a href="/">Home</a></li> 
     <li id="n-search"><a href="/search/">Search</a></li> 
     <li id="n-advertisers"><a href="/advertisers/">Advertisers</a></li> 
     <li id="n-something"><a href="/something/">Something</a></li> 
     <li id="n-contact"><a href="/contact/">Contact</a></li> 
    </ul> 
</div>

和

/* Navigation 
---------------------------------------------------------- */ 

#nav { 
    font-family: Geneva, Arial, Helvetica, sans-serif; 
    } 
#nav ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    background-color: #f5f5f5; 
    width: 100%; 
    } 
#nav li { 
    float: left; 
    margin: 0; 
    padding: 0; 
    background-color: #f5f5f5; 
    } 
#nav li a { 
    float: left; 
    margin: 0 1px 0 0; 
    padding: 4px 9px; 
    font-size: 100%; 
    font-weight: normal; 
    text-decoration: none; 
    color: #111; 
    } 

#nav li a:hover { 
    text-decoration: underline; 
    }

來源

2009-12-12 steven

你能提供更多細節嗎？你想讓你的菜單看起來像什麼？對我來說看起來很好，但我不知道你想從菜單中得到什麼。 – 2009-12-12 05:21:10

有一個空格，菜單的背景不會伸展到右側。 – steven 2009-12-12 05:23:32

試試。

#nav li { 
    display:inline; 
    margin: 0; 
    padding: 0; 
    background-color: #f5f5f5; 
} 

#nav li a { 
    display:inline-block; 
    margin: 0 1px 0 0; 
    padding: 4px 9px; 
    font-size: 100%; 
    font-weight: normal; 
    text-decoration: none; 
    color: #111; 
}

當您浮動項目時，包裝（在本例中爲ul）無法環繞顯示背景。

另一種方法是不添加使這樣的HTML：

<div id="nav"> 
    <ul> 
     <li id="n-home"><a href="/">Home</a></li> 
     <li id="n-search"><a href="/search/">Search</a></li> 
     <li id="n-advertisers"><a href="/advertisers/">Advertisers</a></li> 
     <li id="n-something"><a href="/something/">Something</a></li> 
     <li id="n-contact"><a href="/contact/">Contact</a></li> 
     <li class="clear"> </li> 
    </ul> 
</div>

，這增加了CSS：

#nav li.clear { 
    float:none; 
    clear:both; 
    height:1px; 
}

來源

2009-12-12 05:28:51

所有瀏覽器都不支持'inline-block'。 – 2009-12-12 05:34:02

除IE6之外的所有東西，並且它想要類似的足以在每個其他瀏覽器中保證此修復程序（IE6將具有該空間）。 IE7支持通常爲內聯項目的項目。 – 2009-12-12 18:33:05

-1

好了，你希望你的導航欄的背景在整個網頁的伸展，如果我理解正確。

首先，您需要在您的CSS文件中將width:100%;添加到#nav聲明中。其次，您可能還需要添加background-color: #f5f5f5;以保持整個div的顏色一致性，否則您將無法判斷它是否橫跨整個div。

來源

2009-12-12 05:27:05

#nav { 寬度：100％; background-color：＃f5f5f5; }仍然留下空白 – steven 2009-12-12 05:30:28

那麼，爲什麼你漂浮你的列表項目和錨點？只需給列表項目添加一個「display：inline;」，他們應該像現在一樣排列，不是？ – 2009-12-12 05:32:12

的問題是，你的<ul>技術上不包含任何內容，因爲所有<li>元素都是浮動的。這意味着<ul>並沒有真正的「內部」渲染。

該解決方案與將overflow:hidden添加到#nav ul樣式一樣簡單。這是一個巧妙的解決方法，被稱爲clearfix破解。

如果你想了解更多關於它的信息，這裏有一篇有趣的博文about the clearfix issue。

來源

2009-12-12 05:30:43 zombat

爆炸！我總是忘掉那個簡單的詭計！我喜歡它的簡單性。 – 2009-12-12 05:32:10

我的CSS菜單有什麼問題？

回答

相關問題