导航菜单调整和激活状态的问题

Question

我有两个问题：

1. 如何对齐文本与背景颜色浅绿色盒子的中间而不删除高度：100％我要上边框底部活跃状态触及ul的整个身高？ vertical-align: middle似乎没有工作。
2. 如何确保点击链接时边框底部保持突出显示？

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; 
 
}

<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>

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>

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>