如何使导航栏中的整个列表项可单击？

在整个列表区域启用可点击的导航项

在设计导航栏时，您可能会遇到这样的情况：您想要整个区域的导航栏尽管有足够的填充以提高美观性，但列表项仍可用作可点击的链接。本指南介绍了如何实现此行为。

方法

要在导航栏中启用可点击列表项，请按照以下步骤操作：

1. 从列表项中删除填充：

   • 不要向“li”元素添加填充。应用于列表项的填充将仅将可点击区域限制为文本。

2. 增强锚标记：

   • 修改锚标记（ 元素）以显示内联块：

     #nav a {
       display: inline-block;
       padding: ...;
     }

   • 将填充应用于锚标记而不是“li”项来控制可点击区域。

用法

在提供的示例中，以下修改将启用整个列表项区域的可点击性：

#nav li {
  padding: 0;
}

#nav a {
  display: inline-block;
  padding: 25px 10px;
}

示例代码

<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;
  padding:0;
}

#nav li {
  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>

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

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