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

Question

所以我正在学习在 html 和 css 中制作网站。最近我遇到了以前没有发生在我身上的错误：
然后我在 css 中向 link 添加边框，我无法让底部和顶部边框出现（这是一个大问题因为我想使用 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

我假设你想要你的 link 带下划线，如果你在 link 下方创建一个 div 并适当地着色，这会更好，但要做边框为你的 html:

尝试这样的事情

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

并让您的 css 反映更改：

navi > a:hover {
border-bottom //that stuff

当 link 悬停在它上面时，它会做任何你想做的事情。我不在我的电脑旁，所以我无法测试代码，但我认为如果没有大量关于这个确切问题的 youtube 教程，这将起作用。祝你有美好的一天！

Answer 2

将您的 <a> 标签放在 <li> 标签内。例如：

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

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

Answer 3

确保您在 <li> 标签内使用 <a> 标签，它应该是

<nav id="navigation">
    <ul>
        <li><a href="#" class="navi">Stuff</a></li>
    </ul>
</nav>

ul{list-style:none;}
a{display:block;text-decoration:none;}
li{display:inline-block;}
li:hover > a{color: black;border-bottom: 5px solid #0ecf5b;}
#navigation a{
font-family: Courier New;
font-style: italic;
font-size: 32px;
padding: 5px 25px;
}

<nav id="navigation">
   <ul>
        <li><a href="#" class="navi">Stuff</a></li>
        <li><a href="#" class="navi">Stuff</a></li>
        <li><a href="#" class="navi">Stuff</a></li>
    </ul>
</nav>

Answer 4

我认为更标准的方法是将 a 标签放在 li 中，并使用样式确保它们填满整个 space，例如display: block.

ul {
  list-style: none;
  width: 200px;
}

li a.navi {
  display: block;
  padding: 5px;
  border: 1px solid black;
  cursor: pointer;
  text-align: center;
}

li a.navi:hover {
  background-color: #cccccc;
}

<ul>
  <li><a class="navi">One link</a></li>
  <li><a class="navi">Second link</a></li>
</ul>

这可能不是您想要的样式，我只是根据您提供的代码段进行猜测。

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

border not working correctly on links html

html

css

border