CSS和浮动属性

我想做一个CSS/javascript下拉菜单（基于this example。这工作。但我想为我的整个菜单有一个背景颜色。我试图将<ul>内部div并给这个div一个背景色，但是当我查看页面时，实际的菜单项并没有出现在div的内部，它们在它的下面，经过一些实验后，我发现这是由li元素上的float: left;包括主菜单项。（原因，采取float: left;离开意味着该菜单项堆叠在并排代替海誓山盟的顶部）。CSS和浮动属性

有谁知道如何解决这一问题？

来源

2010-12-10 mranders

你能后发表您的标记和CSS？这里有一篇关于花车的好文章，http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/ – gnome 2010-12-10 14:56:48

为什么要把ul放在div里，然后给背景为div，并且不给ul的背景？ – Sotiris 2010-12-10 15:02:39

如果你只是试图让你的主菜单项的背景颜色，你可以添加overflow:auto;或float:left;到包含div标签。

如果要设置子项的背景颜色，请将其添加到li ul规则中。

简单的例子在这里：http://www.danfsmith.com/so/css/suckerfish/menu.html

来源

2010-12-10 15:04:19

谢谢！ 'overflow：auto'让div在悬停菜单项时得到一个滚动条，但'float：left'完成了这个任务。 – mranders 2010-12-13 09:32:47

我想你所问的是如何为下拉菜单中的每个链接设置背景颜色。如果您使用创建菜单：

<ul class="navigation"> 
<li id="youarehere"><a href="http://example.com">Home</a></li> 
<li><a href="http://example.com/blog/">Blog</a></li> 
<li><a href="http://example.com/papers.html">Papers</a></li> 
<li><a href="http://example.com/programs.html">Programs</a></li> 
<li><a href="http://example.com/activities.html">Activities</a></li> 
<li><a href="http://example.com/contact.html">Contact</a></li> 
<li><a href="http://example.com/about.html">About</a></li> 
</ul>

然后CSS设置背景颜色为：

ul.navigation li a { 
    width: 111px; 
    padding: .5em 1em; 
    background-color: #993333; 
    color: #fff; 
    text-decoration: none; 
    text-align: left; 
    float: left; 
    border-bottom: solid 0px #fff; 
    border-top: solid 0px #fff; 
    border-left: solid 1px #000; 
}

来源

2010-12-10 14:50:39

尝试添加CSS属性overflow: auto;您<div/>或<ul/>其中有背景。

来源

2010-12-10 14:50:43

如果你想div的背景颜色显示，你需要清除浮动。

<div style="background-color: red"> 
<ul> 
<li>asda</li> 
<li>asd</li> 
<li>asd</li> 
<li>asd</li> 
<li>asd</li> 
</ul> 
<span style="clear: both"></span> 
</div>

请注意跨度为“clear：both”风格。应该这样做。

继承人约一个不错的怪癖模式帖子的链接它

http://www.quirksmode.org/css/clearing.html

来源

2010-12-10 15:03:13 Jerryf

CSS和浮动属性

回答

相关问题