Bagaimana untuk Menjadikan Item Senarai Bar Navigasi Boleh Diklik Sepenuhnya?

Menjadikan Item Senarai Bar Navigasi Boleh Diklik Sepenuhnya

Dalam bar navigasi mendatar biasa yang dibuat menggunakan senarai tidak tertib, mengklik mana-mana sahaja pada item senarai akan kemungkinan besar hanya mencetuskan tindakan jika kursor berada dalam teks pautan itu sendiri. Untuk memanjangkan kawasan boleh klik kepada keseluruhan item senarai, ubah suai HTML dan CSS seperti berikut:

CSS:

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

Dengan mengalih keluar padding daripada 'li ' elemen dan menambahkannya pada teg sauh, kawasan yang boleh diklik kini dilanjutkan untuk mengisi keseluruhan lebar dan ketinggian senarai item.

HTML:

<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></code>

Kini, pengguna boleh mengklik mana-mana dalam senarai item untuk mengaktifkan pautan yang sepadan, menyediakan bar navigasi yang lebih mesra pengguna.

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