如何擴展導覽列中列表項目的可點擊區域？

擴大導覽列中清單項目的可點擊區域

導覽列通常具有填充清單項目的無序列表。然而，連結啟動的可點擊區域通常僅限於文字本身。為了增強使用者體驗，您可以讓整個清單項目可點擊。

解決方案：

避免在

中添加填充。元素。相反，將以下 CSS 應用到 中：每個清單項目中的標籤：

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

這可確保可點擊區域擴展到整個清單項，同時保持所需的填充和佈局。

範例：

考慮給定的HTML 和CSS：

<code class="html"><div id="nav">
  <img src="/static/imghwm/default1.png" data-src="/images/renderedicon.png" class="lazy" alt="Icon"    style="max-width:90%"  style="max-width:90%">
  <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 id="Heading">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中文網其他相關文章！