Question

我很难为div标签中的内容分配背景颜色。

在我的html文件中，我有......

<!doctype html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Guitar Gods</title>

    <link href="guitargods_css.css" rel="stylesheet" type="text/css">
    </head>

    <body>
       <div id="header">
       <h1>Guitar Gods</h1>
       <ul>
           <li><a href="#">Home</a></li>
           <li><a href="#">Scales</a></li>
           <li><a href="#">Videos</a></li>
           <li><a href="#">Exercises</a></li>
       </ul>
       </div>
    </body>
</html>

在我的css文件中，我有......

@charset“utf-8”; / * CSS Document * /

h1 {
    color: blue;
}
#header {
    background-color: black;
    padding-left: 10px;
}
#header a {
    text-decoration: none;
    display: block;
}
#header ul {
    list-style-type: none;
    background-color: black;
}
#header ul li {
    float: left;
    padding-left: 5px;
    font:Georgia, "Times New Roman", Times, serif;
}

h1背景为黑色，但我的列表中没有任何项目具有指定的背景颜色。

我不确定我在这里缺少什么。这看起来非常简单。

Answer 1

您需要清除浮动（从列表项中）。一种方法是将overflow: hidden添加到#header ul。

Answer 2

如果您正在使用firefox或chrome，请右键单击h1元素并检查元素。您将能够看到正在应用于该标记的css。您始终可以将h1背景颜色设置为其他颜色。

为div标签分配背景颜色不会改变div标签内元素的背景

2 个答案: