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

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>

Answer 1

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