Bagaimana untuk Menjadikan Keseluruhan Item Senarai Bar Navigasi Boleh Diklik?

Meluaskan Kawasan Boleh Klik Item Senarai Bar Navigasi

Dalam bar navigasi mendatar yang dibuat menggunakan senarai tidak tersusun, anda mungkin menghadapi isu di mana hanya bahagian teks setiap item senarai berfungsi sebagai pautan boleh klik. Ini boleh mengecewakan jika anda telah menambah padding pada item senarai untuk meningkatkan penampilannya.

Untuk menangani isu ini, adalah penting untuk memahami bahawa menggunakan padding pada elemen 'li' boleh mengehadkan kawasan yang boleh diklik pada senaraikan item. Untuk memanjangkan kawasan boleh klik untuk meliputi keseluruhan lebar item senarai, pelapik hendaklah digunakan pada tag anchor (elemen 'a') sebaliknya.

Dengan menetapkan sifat 'paparan' tag anchor kepada 'sebaris-blok', ia berkelakuan seperti elemen sebaris dalam aliran kandungan teks tetapi juga dianggap sebagai elemen blok, membenarkannya menerima lebar dan tinggi. Ini membolehkan padding digunakan pada teg sauh, dengan berkesan memanjangkan kawasan boleh klik untuk meliputi keseluruhan lebar item senarai.

Berikut ialah versi terkini kod anda dengan padding digunakan pada teg sauh dan bukannya pada Elemen '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>

Ini akan menjadikan keseluruhan kawasan setiap item senarai boleh diklik sebagai pautan, membolehkan pengguna menavigasi dengan mudah dan senang.

Atas ialah kandungan terperinci Bagaimana untuk Menjadikan Keseluruhan Item Senarai Bar Navigasi Boleh Diklik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!