CSS导航栏着色问题

时间:2013-07-13 01:31:59

标签: html css navbar

我正在为网站创建导航栏,而我没有显示导航栏的背景颜色。当nav标记在CSS中有float: left;时,背景的颜色不会显示。如果nav代码没有float: left;,则会显示背景颜色。如何在navfloat: 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;
}

2 个答案:

答案 0 :(得分:0)

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

http://jsfiddle.net/DhAsa/

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

答案 1 :(得分:0)

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

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

您使用的浏览器是什么?

阿玛尔