Question

我正在为网站创建导航栏，而我没有显示导航栏的背景颜色。当nav标记在CSS中有float: left;时，背景的颜色不会显示。如果nav代码没有float: left;，则会显示背景颜色。如何在nav有float: left;时显示背景颜色？

<body>
    <div id="menubar" class="centered">
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About Us</a></li>
                <li><a href="book.html">Booking</a></li>                    
                <li><a href="contact.html">Contact Us</a></li>
            </ul>
        </nav>
    </div>
</body>

@charset "UTF-8";
a {
    text-decoration: none;
    font-style: normal;
    font-weight: 600;
    font-family: source-sans-pro;
}
ul {
    list-style-type: none;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
}
nav {
    background-color: #4D4D4D;
    float: left;
}
li {
    width: 25%;
    text-align: center;
    float: left;
}

Answer 1

这个小提示显示当您的导航浮动时，会出现背景颜色：

http://jsfiddle.net/DhAsa/

也许你的问题需要反过来？如果是这样，将overflow:hidden添加到nav css声明应该可以解决问题。（或以任何方式清除floated elements）

Answer 2

当我将您的代码放入测试HTML文档时，导航栏在我测试过的所有浏览器中都能正常显示。

IE - 很好火狐 - 很好 Chrome - 很好

您使用的浏览器是什么？

阿玛尔

CSS导航栏着色问题

2 个答案: