如何让 link 在导航菜单的整个高度上可点击

Question

我创建了一个 40 像素高的导航栏。我希望 link 可以在整个菜单上单击 - 而不仅仅是单词 'home'、'about' 等

有什么建议吗？

HTML:

 <div id="nav">
      <ul>
       <li><a href="index.html">Home</a></li>
       <li><a href="About.html">About</a></li>
       <li><a href="Gallery.html">Gallery</a></li>
       <li><a href="Services.html">Services Information</a></li>
       <li><a href="Contact.html">Contact</a></li>
      </ul>
  </div>

CSS:

#nav {
  height: 100%;
  width: 100%;
  background-color: black;
  color: #fff;
}       
#nav ul {
        background-color: black;
        float: right;
        list-style-type: none;
        margin: 0px;
        padding: 0px;
}               
#nav ul li {
        color: #fff;
        float: left;
        padding: 20px;
}
#nav ul li a {
        color:#fff;
        text-decoration: none;
        line-height: 40px;
        font-weight: bold;
        font-size: 26px;
        display: block;
        width: 100%;
        height:100%;
}
#nav ul li:hover {
        color: #75b2de;
        background-color: #222;
}
#nav ul li a:hover {
        color: #75b2de;
        background-color: #222;
}

Fiddle 在这里： https://jsfiddle.net/yesdeer/6v2Ljnod/7/

Answer 1

去除 li 元素的填充并向 - 添加填充，这应该可以解决问题。然后你只需要考虑这些填充的参数就可以了。

#nav ul li {
    /* padding: 20px; */
}

#nav ul li a{
    padding: 20px; 
}

Answer 2

添加到 Andrzej Answer 您也可以使用高度和行高。

#nav ul li a {
    color: #fff;
    text-decoration: none;
    line-height: 80px;
    font-weight: bold;
    font-size: 26px;
    display: block;
    /* width: 100%; */
    height: 80px;
    padding: 0 20px;
}

如何让 link 在导航菜单的整个高度上可点击

How to get link to be clickable on the full height of the navigation menu

html

css

anchor

hyperlink

navbar