如何使導覽列中的整個清單項目可按一下？

在整個清單區域啟用可點擊的導覽項目

在設計導覽列時，您可能會遇到這樣的情況：您想要整個區域的導覽列儘管有足夠的填充以提高美觀性，但清單項目仍可用作可點擊的連結。本指南介紹如何實現此行為。

方法

要在導覽列中啟用可點選清單項目，請依照下列步驟操作：

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中文網其他相關文章！