Bagaimana cara membuat seluruh area item daftar di bilah navigasi saya, dapat diklik sebagai tautan?

Saya memiliki bilah navigasi horizontal yang dibuat dari daftar yang tidak berurutan, dan setiap item daftar memiliki banyak padding agar terlihat bagus, tetapi satu-satunya area yang berfungsi sebagai tautan adalah teks itu sendiri. Bagaimana saya dapat mengaktifkan pengguna untuk mengklik di mana saja dalam item daftar untuk mengaktifkan link?

#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;
  padding: 25px 10px;
}

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

#nav a {
  color: white;
  font-family: Helvetica, Arial, sans-serif;
  text-decoration: none;
}

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

Jangan letakkan padding di item 'li'. Alih-alih, atur tag anchor ke display:inline-block;dan terapkan padding padanya.

Tentukan properti css tag anchor Anda sebagai:

{display:block}

Kemudian jangkar akan menempati seluruh area daftar, jadi klik Anda akan berfungsi di ruang kosong di sebelah daftar Anda.

Buatlah tag anchor berisi padding daripada li. Dengan cara ini, itu akan mengambil semua area.

Sangat, sangat terlambat ke pesta ini, tapi bagaimanapun: Anda juga bisa mengatur gaya jangkar sebagai item fleksibel. Ini sangat berguna untuk item daftar yang berukuran / tersusun secara dinamis.

a {
  /* This flexbox code stretches the link's clickable 
   * area to fit its parent block. */
  display:        flex;
  flex-grow:      1;
  flex-shrink:    1;
  justify-content: center;
}

(Peringatan: flexboxes adalah obvs masih belum didukung dengan baik. Autoprefixer untuk menyelamatkan!)

Gunakan berikut ini:

a {
  display: list-item;
  list-style-type: none;
}

Atau Anda bisa menggunakan jQuery:

$("li").click(function(){
   window.location=$(this).find("a").attr("href"); 
   return false;
});

Anda harus menggunakan properti dan nilai CSS ini ke dalam li:

pointer-events:all;

Jadi, Anda dapat menangani tautan dengan jQuery atau JavaScript, atau menggunakan atag, tetapi semua elemen tag lain di dalam liharus memiliki properti CSS:

pointer-events:none;

Cukup terapkan css di bawah ini:

<style>
  #nav ul li {
    display: inline;
  }

  #nav ul li a {
    background: #fff;// custom background
    padding: 5px 10px;
  }
</style>

inilah cara saya melakukannya

Buat <a>blok segaris dan hapus bantalan dari Anda<li>

Kemudian Anda bisa bermain dengan widthdan heightdari <a>dalam<li>

Menempatkan widthuntuk 100%sebagai awal dan melihat cara kerjanya

NB: - Dapatkan bantuan Alat Pengembang Chrome saat mengubah heightdanwidth

Anda selalu dapat membungkus seluruh tag li dengan tag hiperlink Berikut adalah solusi saya:

#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;
  text-align: center;
  float: left;
  width: 40px;
  padding: 25px 10px;
}

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

#nav a {
  color: white;
  font-family: Helvetica, Arial, sans-serif;
  text-decoration: none;
}

<div id="nav">
  <img src="/images/renderedicon.png" alt="Icon" height="57" width="57" />
  <ul>
    <a href="#"><li>One1</li></a>
    <a href="#"><li>Two</li></a>
    <a href="#"><li>Three</li></a>
    <a href="#"><li>Four</li></a>
  </ul>
</div>
<div>
  <h2>Heading</h2>
</div>

Letakkan item daftar di dalam hyperlink, bukan sebaliknya.

Misalnya dengan kode Anda:

<a href="#"><li>One</li></a>