为什么我的 div 的背景颜色不会出现？答案

【问题标题】：Why won't the background-color of my div appear?为什么我的 div 的背景颜色不会出现？
【发布时间】：2019-08-29 16:02:21
【问题描述】：

我正在设置下拉菜单。我试图让 div .nav_main 拥有我在我的 CSS 中给它的背景颜色，以便它与我的汉堡菜单的背景颜色相匹配。 .nav_main background-color 由于某种原因没有出现在我面前。我知道这是微不足道的，但我不知道为什么会这样......

.nav_main {
  display: block;
  width: 100%;
  background-color: #282828;
}

.nav_main a {
  display: none;
  width: 100%;
  background-color: #282828;
  text-decoration: none;
  height: 100%;
  padding-top: 32px;
  padding-bottom: 32px;
  margin: 0;
  text-align: center;
  font-size: 50px;
  color: #fff;
}

.nav_main a:last-child {
  display: inline-block;
  width: auto;
}

<header>
  <h1>Facilities Portal</h1>
  <div class="nav_main">
    <a class="activeNav" href="index.html">Facilities Info</a>
    <a href="logaction.html">Log Action</a>
    <a href="viewaction.html">View Actions</a>
    <a href="keysystem.html">Key System</a>
    <a id="burgerIcon" class="icon" onclick="#">&#9776;</a>
  </div>
</header>

我想知道是不是 .nav_main a display: none 导致了这个问题。如果是这样，我该如何解决这个问题，以便 div .nav_main background-color 出现并填充页面的整个宽度？

基本上我希望.nav_main div background-color 出现并填充页面的整个宽度，汉堡图标浮动在右侧。本质上，我将设置汉堡以使 .nav_main a 显示更改为 block。

【问题讨论】：

如您所见 -> jsfiddle.net/agovy829 。有用。你能复制这个问题吗？
我编辑了您的答案以制作代码 sn-p，并在 JSFiddle 上进行了尝试，并且两者都适用。您网站上的其他问题一定是导致问题的原因，请尝试使用 devtool 的检查器查看是什么。也可能是您的代码中的拼写错误。

标签： html css background-color

【解决方案1】：

我已经测试了您的代码，它对我来说运行良好。我注意到了什么；

您正在为div 以及链接设置相同的颜色。这可能是您没有看到差异的原因。
您隐藏了带有display:none 的链接，因此也可能无法分辨它们是哪种颜色。

您可能希望在另一台机器上运行代码以确保问题不在您的机器上。

【讨论】：