导航菜单对齐和活动状态问题

Question

我有两个问题：

1. 如何使用bg color aqua将文本对齐到框的中间而不移除高度：100％因为我希望边框底部处于活动状态以触及ul的整个高度？ vertical-align: middle似乎无法正常工作。
2. 如何在点击链接时确保边框底部保持突出显示？
＆＃13;
＆＃13;
ul.nav {
  list-style-type: none;
  display: flex;
  height: 45px;
  margin-bottom: 30px;
  align-items: center;
  background-color: gray;
}

ul.nav .nav-item {
  box-sizing: border-box;
  margin-right: 20px;
  height: 100%;
  background-color: aqua;
}

ul.nav .nav-item:active, ul.nav .nav-item:focus {
  border-bottom: 3px solid blue;
  outline: none;
}

ul.nav .nav-link {
  text-decoration: none;
}

ul.nav .nav-link:hover, ul.nav .nav-link:focus, ul.nav .nav-link:active {
  text-decoration: none;
  outline: none;
}
＆＃13;
<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#">Dashboard</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Account</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Contact</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">About</a>
  </li>
</ul>
＆＃13;
＆＃13;
＆＃13;

Answer 1

在display: table（li）元素上使用nav-item，在display: table-cell内使用vertical-align。请参阅下面的代码段。

这样您就可以更有效地使用ul.nav { list-style-type: none; display: flex; height: 45px; margin-bottom: 30px; align-items: center; background-color: gray; } ul.nav .nav-item { box-sizing: border-box; margin-right: 20px; height: 100%; background-color: aqua; display: table; } ul.nav > .nav-item > .nav-link:active, ul.nav > .nav-item > .nav-link:focus { border-bottom: 3px solid blue; outline: none; } ul.nav .nav-link { text-decoration: none; display: table-cell; vertical-align: middle; } ul.nav .nav-link:hover, ul.nav .nav-link:focus, ul.nav .nav-link:active { text-decoration: none; outline: none; }。

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#">Dashboard</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Account</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Contact</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">About</a>
  </li>
</ul>

{{1}}

Answer 2

我想这就是你想要的？ <li>不是输入元素，因此它们没有：焦点状态。

ul.nav {
  list-style-type: none;
  display: flex;
  height: 45px;
  margin-bottom: 30px;
  align-items: center;
  background-color: gray;
}

ul.nav .nav-item {
  box-sizing: border-box;
  margin-right: 20px;
  background-color: aqua;
  height: 100%;
}

ul.nav .nav-item .nav-link{
  display: block;
  line-height: 42px;
}


ul.nav .nav-item .nav-link:active, ul.nav .nav-item .nav-link:focus {
  border-bottom: 3px solid blue;
  outline: none;
}

ul.nav .nav-link {
  text-decoration: none;
}

ul.nav .nav-link:hover, ul.nav .nav-link:focus, ul.nav .nav-link:active {
  text-decoration: none;
  outline: none;
}

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#">Dashboard</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Account</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Contact</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">About</a>
  </li>
</ul>