如何让链接在导航菜单的整个高度上可点击答案

【问题标题】：How to get link to be clickable on the full height of the navigation menu如何让链接在导航菜单的整个高度上可点击
【发布时间】：2020-11-04 11:52:05
【问题描述】：

我创建了一个 40 像素高的导航栏。我希望链接可以在菜单的完整大小上单击 - 而不仅仅是“家”、“关于”等词。

有什么建议吗？

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

小提琴在这里： https://jsfiddle.net/yesdeer/6v2Ljnod/7/

【问题讨论】：

标签： html css hyperlink navbar anchor

【解决方案1】：

去掉 li 元素的填充并将填充添加到 a - 比应该做的伎俩。然后你只需要考虑这些填充的邻接参数，这样看起来就可以了。

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

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

【讨论】：

【解决方案2】：

添加到 Anrzej 答案，您也可以使用高度和行高。

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

【讨论】：