Question

首先，我真的很新，如果我听起来很笨，那就很抱歉; _;现在，我尝试在列表项上创建背景颜色。就像这个网站有，带有标志的黑色条，搜索条等。我试着把div包装到处都没有，但似乎没什么用。

HTML

<nav class="nav-menu">
    <div class="container">
        <ul>
            <li>About Us</li>
            <li>Staff</li>
            <li>Schedule</li>
            <li>Home</li>
        </ul>
    </div>
</nav>

CSS

.nav-menu ul {
margin-right: 50px;
}
.nav-menu li {
list-style: none;
display: inline;
margin-left: 30px;
float: right;
color: red;
}
.container {
color: black;
}

http://jsfiddle.net/Hm4KJ/

Answer 1

将overflow设置为auto以显示.content div中的所有内容（现在所有内容都为hidden，因为您使用float属性）

.container {
   background: black;
   overflow:auto;
}

我想这是一个错字，无论如何，你应该设置background属性而不是color来设置背景颜色。

Example

Answer 2

如果你只想在每个列表项中使用背景颜色，你可以使用这个：

.nav-menu li {
    list-style: none;
    display: inline;
    margin-left: 30px;
    float: right;
    color: red;
    background:#000000;
    display:inline-block;
    padding:5px 10px;
}

http://jsfiddle.net/Hm4KJ/2/

Answer 3

您可以在浮动元素之后添加clearfix。

HTML：放一个

<div class="clear"></div>

在<ul></ul>

之后

如何使用背景颜色制作顶部包装（？）

3 个答案: