Question

通过设置＆＃34;导航栏＆＃34;我遇到了问题。背景颜色。一切都很好，但后来我添加了这些线，它开始不能正常工作：

.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;
}

Answer 1

是因为float's Check this FIDDLE导致问题导致您需要在父元素关闭之前清除浮点数父级已浮动元素

这里

#nav:after{
  clear:both;
}

了解更多信息Read this source。对于浏览器兼容性问题，请使用clearfix hack

HTML背景色

1 个答案: