问题描述:
在使用ul制作下拉菜单时,效果如下,要给菜单栏(即ul)加上背景色,发现background-color没起作用。查看ul元素盒子大小,发现盒子高度为0。
HTML:
<div id="menuList">
<ul>
<li>学院概况</li>
<li>学科建设</li>
<li>教师园地</li>
<li>学生园地</li>
</ul>
</div>
CSS:
body,div,ul,li{
margin: 0;
padding: 0;
}
#menuList{
margin:20px;
}
ul{
list-style: none;
background-color: gray;
}
ul li{
float: left;
padding: 0 5px;
border-left: solid 1px black;
}
解决方案:
由于ul没有直接制定高度,其高度根据里面的li来伸缩。由于li设置了向左浮动,因此得清除浮动才能显示背景色。
1. 清除浮动可以给ul添加一个overflow:hidden的样式。
2. 或者在</ul>
前面加入一个清除浮动的div,即
<div style="clear: both;"></div>