如何使整個導覽列清單項目可作為連結點擊？

使整個導覽列清單項目可作為連結點擊

根據要求，水平導覽列已使用無序列表構建，其中每個列表項目都有足夠的填充。然而，期望的效果是整個清單項目區域充當活動鏈接，而不僅僅是文字。以下是實現此目的的方法：

要使每個列表項目的整個區域都可單擊，請按如下所示更改CSS 代碼：

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

通過將inline- block 應用於錨標記(# nav a)，它們的行為類似於區塊元素，在垂直對齊的同時佔據列表項目的寬度。這表示您先前應用於清單項目的內邊距 (#nav li) 現在可以應用於錨標記。

透過此調整，每個清單項目的整個區域（包括內邊距）將被識別為可點擊的連結。下面的程式碼片段演示了必要的更改：

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

通過將填充與列表項分開，您可以保持視覺外觀，同時確保可以單擊整個列表項來激活關聯的鏈接，提供用戶友好且具視覺吸引力的導航體驗。

以上是如何使整個導覽列清單項目可作為連結點擊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！