如何使导航栏中列表项的整个区域都可以作为链接单击？

Question

我有一个由无序列表组成的水平导航栏，每个列表项都有很多填充以使其看起来不错，但唯一用作链接的区域是文本本身。如何使用户能够单击列表项中的任意位置以激活链接？

 #nav {
  background-color: #181818;
  margin: 0px;
  overflow: hidden;
}

#nav img {
  float: left;
  padding: 5px 10px;
  margin-top: auto;
  margin-bottom: auto;
  vertical-align: bottom;
}

#nav ul {
  list-style-type: none;
  margin: 0px;
  background-color: #181818;
  float: left;
}

#nav li {
  display: block;
  float: left;
  padding: 25px 10px;
}

#nav li:hover {
  background-color: #785442;
}

#nav a {
  color: white;
  font-family: Helvetica, Arial, sans-serif;
  text-decoration: none;
}

 <div id="nav">
  <img src="/images/renderedicon.png" alt="Icon" height="57" width="57" />
  <ul>
    <li><a href="#">One1</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
  </ul>
</div>
<div>
  <h2>Heading</h2>
</div>

原文由 Curyous 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

不要在“li”项中放置填充。而是将锚标记设置为 display:inline-block; 并对其应用填充。

原文由 Stussa 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

将您的锚标记 css 属性定义为：

 {display:block}

然后锚点将占据整个列表区域，因此您的点击将在列表旁边的空白区域起作用。

原文由 suren 发布，翻译遵循 CC BY-SA 3.0 许可协议