html - 边框无法在链接 html 上正常工作

Question

所以我正在学习用 html 和 css 制作网站。最近我遇到了以前没有发生在我身上的错误:
然后我在 css 中添加边框到链接，我无法让底部和顶部边框出现(这是一个大问题，因为我想使用 border-bottom)

a.navi:link{color: black;}
a.navi:hover{color: black;
border-bottom: 5px solid #0ecf5b;}
#navigation li{
display: inline-block;
font-family: Courier New;
font-style: italic;
font-size: 32px;
padding: 5px 25px;
background: #ffffff;
/*border-bottom: 5px solid #0ecf5b;*/
}

但是，如果我将 border-bottom: 添加到导航 li{} 中，我将获得此边框
(#navigation li{} 是用

包围的列表项

<a href="..." class="navi">

标签)

HTML代码:

<nav id="navigation">
    <ul>
        <a href="Index.html" class="navi"><li>Home</li></a>
        <a href="web.html" class="navi"><li>Some-Stuff</li></a>
        <a href="logo.html" class="navi"><li>About</li></a>
        <a href="game.html" class="navi"><li>Contacts</li></a>
        <a href="about.html" class="navi"><li>Others</li></a>
    </ul>
</nav>

Answer 1

把你的 <a> <li> 内的标签标签。 例如:

<li><a href="Index.html" class="navi">Home</a></li>

这是一个工作示例:https://jsfiddle.net/kb3su8og/