如何使导航栏列表项完全可点击？

使导航栏列表项完全可点击

在使用无序列表创建的典型水平导航栏中，单击列表项上的任意位置将如果光标位于链接本身的文本内，很可能只会触发该操作。要将可点击区域扩展到整个列表项，请修改 HTML 和 CSS，如下所示：

CSS:

<code class="css">#nav li a {
  display: inline-block;
  padding: 25px 10px;
}</code>

通过从 'li 中删除填充' 元素并将其添加到锚标记中，可点击区域现在已扩展以填充列表项的整个宽度和高度。

HTML:

<code class="html"><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></code>

现在，用户可以点击列表项中的任意位置来激活相应的链接，提供更人性化的导航栏。

以上是如何使导航栏列表项完全可点击？的详细内容。更多信息请关注PHP中文网其他相关文章！