Bagaimana untuk Memanjangkan Kawasan Boleh Diklik Item Senarai dalam Bar Navigasi?

Meluaskan Kawasan Item Senarai Boleh Diklik dalam Bar Navigasi

Bar navigasi selalunya menampilkan senarai tidak tertib dengan item senarai empuk. Walau bagaimanapun, kawasan boleh klik untuk pengaktifan pautan biasanya terhad kepada teks itu sendiri. Untuk mempertingkatkan pengalaman pengguna, anda boleh menjadikan keseluruhan item senarai boleh diklik.

Penyelesaian:

Elakkan menambah padding pada

unsur. Sebaliknya, gunakan CSS berikut pada teg dalam setiap item senarai:

a {
  display: inline-block;
  padding: [desired padding values];
}

Ini memastikan kawasan yang boleh diklik berkembang ke keseluruhan item senarai, sambil mengekalkan padding dan reka letak yang diingini.

Contoh:

Pertimbangkan HTML dan CSS yang diberikan:

<code class="html"><div id="nav">
  <img src="/static/imghwm/default1.png" data-src="/images/renderedicon.png" class="lazy" alt="Icon"    style="max-width:90%"  style="max-width:90%">
  <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 id="Heading">Heading</h2>
</div></code>

<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;
}

#nav li {
  display: block;
  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>

Dengan menggunakan paparan: inline-block; dan sifat padding pada teg sauh, kawasan yang boleh diklik bagi setiap item senarai memanjang ke seluruh lebar item, tanpa menjejaskan reka letak asalnya.

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