如何使导航元素的（活动）颜色适合容器？答案

【问题标题】：How do I make the (active) color of my nav element fit the container?如何使导航元素的（活动）颜色适合容器？
【发布时间】：2019-12-02 21:55:18
【问题描述】：

在我创建的导航栏中，我注意到 a:hover 颜色属性不会拉伸以垂直填充容器。

我尝试增加垂直填充，这确实有效，但它看起来不太干净，所以我希望有更好的方法来解决它。

/*Navigation Bar*/

nav {
  margin: 0;
  padding: 0;
  background-color: #383838;
  line-height: 45px;
  height: 45px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.nav_bar a {
  color: white;
  text-decoration: none;
  vertical-align: middle;
  padding: 0px 16px;
}

.nav_bar a.active {
  background-color: #33A2FF;
  color: white;
}

.nav_bar a:hover:not(.active) {
  background-color: #f1f1f1;
  color: #000;
}

<nav>
  <div class="nav_bar">
    <a href="#" class="active">Home</a>
    <a href="#">Stadium</a>
    <i class="fas fa-football-ball"></i>
    <a href="#">RSVP</a>
    <a href="#">History</a>
  </div>
</nav>

基本上，我只是想拉伸颜色属性以垂直适应盒子。

【问题讨论】：

从.nav_bar a 中删除vertical-align: middle 并将height: 100%; display: inline-block; 添加到其中。

标签： html css navigation navbar

【解决方案1】：

删除 vertical-align: middle 并将 display: inline-flex; 添加到 a 元素。

/*Navigation Bar*/

nav {
  margin: 0;
  padding: 0;
  background-color: #383838;
  line-height: 45px;
  height: 45px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.nav_bar a {
  color: white;
  text-decoration: none;
  padding: 0px 16px;
  display: inline-flex; /* To align the elements horizontally */
  /* vertical-align: middle;  To remove the top spacing. */ 
}

.nav_bar a.active {
  background-color: #33A2FF;
  color: white;
  
}

.nav_bar a:hover:not(.active) {
  background-color: #f1f1f1;
  color: #000;
}

<nav>
  <div class="nav_bar">
    <a href="#" class="active">Home</a>
    <a href="#">Stadium</a>
    <i class="fas fa-football-ball"></i>
    <a href="#">RSVP</a>
    <a href="#">History</a>
  </div>
</nav>

【讨论】：