如何扩展导航栏中列表项的可点击区域？

扩大导航栏中列表项的可点击区域

导航栏通常具有带填充列表项的无序列表。然而，链接激活的可点击区域通常仅限于文本本身。为了增强用户体验，您可以使整个列表项可点击。

解决方案：

避免在

中添加填充。元素。相反，将以下 CSS 应用到 中：每个列表项中的标签：

a {
  display: inline-block;
  padding: [desired padding values];
}

这可确保可点击区域扩展到整个列表项，同时保持所需的填充和布局。

示例：

考虑给定的 HTML 和 CSS：

<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>
<div>
  <h2>Heading</h2>
</div></code>

<code class="css">#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;
}

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

#nav a {
  color: white;
  font-family: Helvetica, Arial, sans-serif;
  text-decoration: none;
  display: inline-block;
  padding: 25px 10px;
}</code>

通过应用 display: inline-block;和锚标记的 padding 属性，每个列表项的可点击区域延伸到项目的整个宽度，而不影响其原始布局。

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