Bagaimana untuk Menjadikan Keseluruhan Item Senarai Bar Navigasi Boleh Diklik sebagai Pautan?

Jadikan Keseluruhan Item Senarai Bar Navigasi Boleh Diklik sebagai Pautan

Seperti yang diminta, bar navigasi mendatar telah distrukturkan menggunakan senarai tidak tertib, di mana setiap item senarai mempunyai padding yang mencukupi. Walau bagaimanapun, kesan yang diingini ialah keseluruhan kawasan item senarai berfungsi sebagai pautan aktif dan bukannya teks sahaja. Begini cara untuk mencapainya:

Untuk menjadikan kawasan penuh setiap item senarai boleh diklik, ubah kod CSS seperti berikut:

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

Dengan menggunakan blok sebaris pada teg sauh (# nav a), mereka akan berkelakuan seperti elemen blok, mengambil lebar item senarai sambil menjajarkan secara menegak. Ini bermakna bahawa padding yang anda gunakan sebelum ini pada item senarai (#nav li) kini boleh digunakan pada teg sauh.

Dengan pelarasan ini, keseluruhan kawasan setiap item senarai, termasuk padding, akan diiktiraf sebagai pautan yang boleh diklik. Coretan kod di bawah menunjukkan perubahan yang diperlukan:

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

Dengan mengasingkan padding daripada item senarai, anda boleh mengekalkan penampilan visual sambil memastikan keseluruhan item senarai boleh diklik untuk mengaktifkan pautan yang berkaitan, menyediakan pengalaman navigasi yang mesra pengguna dan menarik secara visual.

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