关于html：为什么我在标题背景上添加的颜色不可见？

why isn't the color I added on the header background visible?

本问题已经有最佳答案，请猛点这里访问。

试图对我的标题应用背景色，但为什么#header背景色不可见？我试过

header { background: grey; width: 100%; margin: 0 auto }

我也尝试了不同的颜色，但似乎不起作用。我是这个领域的新手，所以任何帮助都会受到感激。我附上了HTML和CSS代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

* {
margin: 0 auto
}

#slogan {
background: #063540;
color: white;
padding: 20px;
font-family: 'Open Sans', sans-serif;
font-size: small;
width: 100%;
padding-left: 8%;
}

#header {
background: grey;
width: 100%;
margin: 0 auto
}

a {
text-decoration: none;
}

#logo a {
color: #063540;
}

#logo {
float: left;
padding-left: 8%;
color: #063540;
margin-top: 20px;
}

.navbar {
float: right;
top: 0px;
padding-right: 20%;
margin-top: 20px;
}

.navbar a {
padding-left: 25px;
color: #063540;
font-size: 14pt;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
MyWebsite
</head>

<body>
We are creative agency


MyWebsite

Home
About
Services
Projects
Pages
Blog
Contact

</body>
</html>

因为你的header中有浮动元素，所以你需要清除浮动元素。

当一个浮动的元素在一个容器框中时，这个元素不会自动强制容器的高度调整到浮动的元素。当一个元素浮动时，它的父元素不再包含它，因为该浮动已从流中移除。

请参考此链接了解更多信息。

1
2
3
4
5

#header:before, #header:after {
content:"";
clear: both;
display: table;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

*{
margin: 0 auto
}
#slogan {
background: #063540;
color: white;
padding: 20px;
font-family: 'Open Sans', sans-serif;
font-size: small;
width: 100%;
padding-left: 8%;
}

#header {
background: grey;
width: 100%;
margin: 0 auto
}
#header:before, #header:after {
content:"";
clear: both;
display: table;
}
a {
text-decoration: none;
}

#logo a {
color: #063540;
}

#logo {
float: left;
padding-left: 8%;
color: #063540;
margin-top: 20px;
}

.navbar {
float: right;
top: 0px;
padding-right: 20%;
margin-top: 20px;
}

.navbar a {
padding-left: 25px;
color: #063540;
font-size: 14pt;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

相关讨论

这是因为头中的子元素具有float属性，当元素具有float属性时，它们实际上不会呈现为块元素。https://stackoverflow.com/a/16568504/2894798这就是为什么在默认情况下，您的头高度为0，所以为了修复它，我将添加一个清晰的修复属性，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

* {
margin: 0 auto;
}

#slogan {
background: #063540;
color: white;
padding: 20px;
font-family: 'Open Sans', sans-serif;
font-size: small;
width: 100%;
padding-left: 8%;
}

#header {
background: grey;
width: 100%;
margin: 0 auto;
}

a {
text-decoration: none;
}

#logo a {
color: #063540;
}

#logo {
float: left;
padding-left: 8%;
color: #063540;
margin-top: 20px;
}

.navbar {
float: right;
top: 0px;
padding-right: 20%;
margin-top: 20px;
}

.navbar a {
padding-left: 25px;
color: #063540;
font-size: 14pt;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

All elements inside #header are float, so #header get out of normal flow of document.

方法1)

1
2
3
4
5

#header:after {
content: '';
display: block;
clear: both;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

* {
margin: 0 auto

}

#slogan {
background: #063540;
color: white;
padding: 20px;
font-family: 'Open Sans', sans-serif;
font-size: small;
width: 100%;
padding-left: 8%;

}

#header {
background: grey;
width: 100%;
margin: 0 auto;

}
#header:after {
content: '';
display: block;
clear: both;
}

a {
text-decoration: none;

}
#logo a {
color: #063540;

}

#logo {
float: left;
padding-left: 8%;
color: #063540;
margin-top: 20px;

}

.navbar {
float: right;
top: 0px;
padding-right: 20%;
margin-top: 20px;

}

.navbar a {
padding-left: 25px;
color: #063540;
font-size: 14pt;

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

We are creative agency


MyWebsite

Home
About
Services
Projects
Pages
Blog
Contact

方法2)

将
插入HTML代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

* {
margin: 0 auto

}

#slogan {
background: #063540;
color: white;
padding: 20px;
font-family: 'Open Sans', sans-serif;
font-size: small;
width: 100%;
padding-left: 8%;

}

#header {
background: grey;
width: 100%;
margin: 0 auto;

}

a {
text-decoration: none;

}
#logo a {
color: #063540;

}

#logo {
float: left;
padding-left: 8%;
color: #063540;
margin-top: 20px;

}

.navbar {
float: right;
top: 0px;
padding-right: 20%;
margin-top: 20px;

}

.navbar a {
padding-left: 25px;
color: #063540;
font-size: 14pt;

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

We are creative agency


MyWebsite

Home
About
Services
Projects
Pages
Blog
Contact