在div
使用 类创建.navbar
并通过为我所在的每个页面实现它之后display: flex;
,我希望导航栏中的活动页面的整个背景具有不同的颜色。目前,它只影响文本。
通过导航栏的不同实现实现了所需的行为,但它导致了不同的问题。
.navbar {
background-color: #0066b1;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.navbar a {
color: #fff773;
text-decoration: none;
}
.navbar div.active {
background-color: #233440;
}
<div class="navbar">
<div class="active"><a href="HomePage.html">Home</a></div>
<div><a href="LorePage.html">Lore</a></div>
<div><a href="CharacterCreator.html">Character Creator</a></div>
<div><a href="Roster.html">Roster</a></div>
</div>
我首先通过标签尝试此操作,但由于某种原因,它导致栏的最左侧/主页项目在其背景中仅部分着色。这仅发生在主页选择时: