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

我假设你想要你的链接加下划线，如果你在链接下面创建一个div并且颜色合适，那会更好，但为你的html做边框尝试这样的事情：

&CQL_FILTER=within(the_geom,POLYGON((70.136719 10.833306,....)))

并让您的CSS用以下内容反映更改：

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

当链接悬停在它上面时，它会做什么。我离开了我的电脑，所以我无法测试代码，但我认为如果没有大量关于这个问题的youtube教程，这将会有效。祝你有愉快的一天！

Answer 2

将<a>标记放入<li>标记内。例如：

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

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

Answer 3

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

我认为执行所需操作的更标准方法是将a标记放在li内，并使用样式确保它们填满整个空间，例如{ {1}}。

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

这可能不是你想要的风格，我只是根据你提供的代码猜测。

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

4 个答案: