Bagaimana Membuat Keseluruhan Item Senarai Boleh Diklik dalam Bar Navigasi?

Dayakan Item Navigasi Boleh Diklik Sepanjang Kawasan Senarai

Dalam mereka bentuk bar navigasi, anda mungkin menghadapi situasi di mana anda mahukan keseluruhan kawasan sesebuah item senarai untuk berfungsi sebagai pautan boleh klik, walaupun pelapik yang mencukupi untuk daya tarikan estetik. Panduan ini menerangkan cara untuk mencapai tingkah laku ini.

Pendekatan

Untuk mendayakan item senarai boleh klik dalam bar navigasi anda, ikuti langkah berikut:

1. Alih Keluar Padding daripada Senarai Item:

   • Elakkan daripada menambah padding pada elemen 'li'. Pelapik yang digunakan pada item senarai akan mengehadkan kawasan boleh klik kepada teks sahaja.

2. Tingkatkan Teg Sauh:

   • Ubah suai teg sauh ( elemen) untuk memaparkan sekatan sebaris:

     #nav a {
       display: inline-block;
       padding: ...;
     }

   • Gunakan padding pada teg sauh dan bukannya item 'li' untuk mengawal kawasan boleh klik.

Penggunaan

Dalam contoh yang disediakan, pengubahsuaian berikut akan membolehkan kebolehklikan di seluruh kawasan item senarai:

#nav li {
  padding: 0;
}

#nav a {
  display: inline-block;
  padding: 25px 10px;
}

Kod Contoh

<code class="css">#nav {
  background-color: #181818;
  margin: 0px;
  overflow: hidden;
}

#nav img {
  float: left;
  padding: 5px 10px;
  margin-top: auto;
  margin-bottom: auto;
  vertical-align: bottom;
}

#nav ul {
  list-style-type: none;
  margin: 0px;
  background-color: #181818;
  float: left;
  padding:0;
}

#nav li {
  float: left;
}

#nav li:hover {
  background-color: #785442;
}

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

<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>
<div>
  <h2>Heading</h2>
</div></code>

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