1

我很难为 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 文档 */

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 背景是黑色的，但我列表中的所有项目都没有指定的背景颜色。

我不确定我在这里缺少什么。这似乎很简单。

4

2 回答 2

4

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

于 2013-03-10T16:06:30.730 回答
1

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

于 2013-03-10T16:06:15.577 回答