擴大導覽列清單項目的可點擊區域
在使用無序列表建立的水平導覽列中,您可能會遇到以下問題:只有每個清單項目的文字部分充當可點擊的連結。如果您為清單項目添加內邊距以增強其外觀,這可能會令人沮喪。
要解決此問題,必須了解對「li」元素套用內邊距可能會限制清單項目的可點擊區域。列出項目。若要擴展可點選區域以覆蓋清單項目的整個寬度,應將填入套用於錨標記(「a」元素)。
透過將錨標記的「display」屬性設為'inline-block',它的行為類似於文字內容流中的內聯元素,但也被視為區塊元素,允許它接受寬度和高度。這允許將填充應用於錨標記,從而有效地擴展可點擊區域以覆蓋清單項目的整個寬度。
這是程式碼的更新版本,其中將填充應用於錨標記而不是'li' 元素:
<code class="css">#nav li { display: block; float: left; } #nav a { color: white; font-family: Helvetica, Arial, sans-serif; text-decoration: none; display: inline-block; padding: 25px 10px; }</code>
這將使每個列表項的整個區域都可作為鏈接點擊,從而使用戶能夠輕鬆方便地導航。
以上是如何讓整個導覽列清單項目可點擊?的詳細內容。更多資訊請關注PHP中文網其他相關文章!