通过将“导航栏”设置为背景色,我遇到了问题。一切都很好,但是后来我添加了以下几行,但开始无法正常工作:

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

最佳答案

是的,由于float's Check this FIDDLE,导致问题的原因是您需要在父元素被关闭之前清除浮点数父元素具有浮点数

这里

#nav:after{
  clear:both;
}


有关更多信息Read this source。对于浏览器兼容性问题,请使用clearfix hack

10-05 21:15
查看更多