为什么我的"nav"对齐和背景颜色不起作用？

Question

我有两个CSS样式为我的导航背景和对齐导航栏的中心。然而,无论什么原因校准和背景颜色只显示当我删除的关闭括号"nav"CSS。

nav {
text-align: center;
background-color: gray;
}
.navbar {
font-family: Helvetica, Sans-Serif;
font-weight: bold;
font-size: 1em;
text-align: center;
}
.navbar a {
text-decoration: none;
text-align: left;
float: left;
border-bottom: 2px solid;
padding: .25em 4em 0em 1em;
color: black;
}
.navbar a:hover {
cursor: pointer;
background-color: black;
color: white;
border-bottom: 2px black solid;
transition: background-color .25s linear, color .25s linear;
}
.navbar .current {
background-color: black;
border-bottom: 2px black solid;
color: #ff2c7b;
position: relative;
}
.current::before {
content: "";
display: block;
width: 0;
border: 10px solid black;
border-color: black transparent transparent transparent;
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
}

<nav class="navbar">
<a class="current" href="#">Home</a>
<a href="articles.html">Articles</a>
<a href="teamreports.html">Team Reports</a>
<a href="#">Team Compendium</a>
<a href="#">Resources</a>
<a href="#">Events</a>
</nav>
<br />
<div>
<p>Sample text goes here.</p>
</div>

我目前仍在学习HTML和CSS，但我想尝试重新创建网站尽可能接近我可以帮助我学习的技能，然后创建我自己的。

Answer 1

您的nav元素包含浮动元素，默认情况下不会自动包含在页面上的父元素空间中，即nav将不会垂直扩展以覆盖它们，因此高度为0，因为它只包含浮动元素。为了避免这种情况，将overflow: auto;添加到nav中。

nav {
text-align: center;
background-color: gray;
overflow: auto;
}
.navbar {
font-family: Helvetica, Sans-Serif;
font-weight: bold;
font-size: 1em;
text-align: center;
}
.navbar a {
text-decoration: none;
text-align: left;
float: left;
border-bottom: 2px solid;
padding: .25em 4em 0em 1em;
color: black;
}
.navbar a:hover {
cursor: pointer;
background-color: black;
color: white;
border-bottom: 2px black solid;
transition: background-color .25s linear, color .25s linear;
}
.navbar .current {
background-color: black;
border-bottom: 2px black solid;
color: #ff2c7b;
position: relative;
}
.current::before {
content: "";
display: block;
width: 0;
border: 10px solid black;
border-color: black transparent transparent transparent;
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
}

<nav class="navbar">
<a class="current" href="#">Home</a>
<a href="articles.html">Articles</a>
<a href="teamreports.html">Team Reports</a>
<a href="#">Team Compendium</a>
<a href="#">Resources</a>
<a href="#">Events</a>
</nav>
<br />
<div>
<p>Sample text goes here.</p>
</div>

Answer 2

将overflow: hidden添加到nav规则中:

nav {
text-align: center;
background-color: gray;
overflow: hidden;
}