我正在设置下拉菜单。我试图让 div .nav_main
具有我在 CSS 中给它的背景颜色,以便它与我的汉堡菜单的背景颜色相匹配。由于某种原因,.nav_main
背景色没有显示出来。我知道这很微不足道,但我不明白为什么会这样......
.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="#">☰</a>
</div>
</header>
我想知道 .nav_main a
display: none
是否导致了这个问题。如果是这样,我该如何解决这个问题,使 div .nav_main
背景颜色出现并填充页面的整个宽度?
基本上,我希望 .nav_main
div background-color 出现并填充页面的整个宽度,汉堡图标漂浮在右侧。本质上,我会将汉堡设置为使 .nav_main
显示更改为 block
。
最佳答案
我已经测试了您的代码,它在我这边运行良好。 我注意到了什么;
- 您为
div
和链接设置了相同的颜色。这可能是您看不到差异的原因。 - 您正在使用
display:none
隐藏链接,因此可能也无法分辨它们是哪种颜色。
您可能想在另一台机器上运行代码以确保问题不在您的机器上。
关于html - 为什么不显示我的 div 的背景颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55574536/