我的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菜单有什么问题？

回答

相关问题