1
我有问题通过设置“导航栏”背景颜色。一切都很好,但后来我添加了这些线,它开始不能正常工作:HTML背景颜色
.pull-left {
float: left;
}
.pull-right {
float: right;
}
即使然后我设置背景色它不工作。你在下面看到。我将背景色设置为黑色,但仍然是白色。我不明白为什么。
#nav {
background-color: #222;
}
这是我所有的HTML代码:
<html>
<head>
<title>Fero Estetra</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<div id="nav">
<div id="nav_wrapper">
<ul class="pull-left">
<li><a href="#">Home</a></li><li>
<a href="#">About us</a></li><li>
<a href="#">Contact</a></li><li>
<a href="#">Social<img id="img1" src="nuotraukos/arrow.png" /></a>
<ul>
<li><a href="http://www.youtube.com/">Youtube</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ul>
</li>
</ul>
<ul class="pull-right">
<li><a href="#">Register</a></li><li>
<a href="#">Login</a></li>
</ul>
</div>
</div>
</body>
</html>
这是我所有的CSS代码:
body {
padding: 0;
margin: 0;
overflow-y: scroll;
font-family: Arial;
font-size: 18px;
}
#nav {
background-color: #222;
}
#nav_wrapper {
width: 960px;
margin: 0 auto;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #333;
}
#nav ul li img {
vertical-align: middle;
padding-left: 5px;
transform: rotate(90deg);
margin-top: -5px;
}
#nav ul li a,visited {
color: #ccc;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li a:hover {
color: #ccc;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-top: 0;
margin-left: -5px;
min-width: 200px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a,visited {
color: #ccc;
}
#nav ul ul li a:hover {
color: #099;
}
您需要清除浮动。尝试将'overflow:hidden'添加到'#nav'或使用网格系统中使用的任何clearfix。 – 2014-10-29 12:34:14
你可以试试这个[clear float](http://stackoverflow.com/questions/16568272/how-does-css-float-work-why-doesnt-the-height-of-a-container-element-increas) – 2014-10-29 12:35:54