Gezinme çubuğumdaki bir liste öğesinin tüm alanını bağlantı olarak tıklanabilir hale nasıl getirebilirim?

Sırasız bir listeden yapılmış yatay bir gezinme çubuğum var ve her liste öğesinin güzel görünmesi için birçok dolgusu var, ancak bağlantı olarak çalışan tek alan metnin kendisidir. Bağlantıyı etkinleştirmek için kullanıcının liste öğesinin herhangi bir yerine tıklamasını nasıl sağlayabilirim?

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

'Li' maddesine dolgu koymayın. Bunun yerine bağlantı etiketini olarak ayarlayın ve display:inline-block;ona dolgu uygulayın.

Bağlantı etiketi css özelliğinizi şu şekilde tanımlayın:

{display:block}

Daha sonra bağlantı tüm liste alanını kaplar, böylece tıklamanız listenizin yanındaki boş alanda çalışacaktır.

Bağlantı etiketinin li. Bu şekilde tüm alanı kaplayacaktır.

Bu partiye çok geç, ama yine de: çapayı esnek bir öğe olarak da şekillendirebilirsiniz. Bu, özellikle dinamik olarak boyutlandırılmış / düzenlenmiş liste öğeleri için kullanışlıdır.

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

(Uyarı: flexbox'lar obv'lerdir hala iyi desteklenmemektedir. Kurtarmaya otomatik düzeltme!)

Aşağıdakileri kullanın:

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

Veya jQuery'yi kullanabilirsiniz:

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

Bu CSS özelliğini ve değerini aşağıdakiler için kullanmalısınız li:

pointer-events:all;

Dolayısıyla, bağlantıyı jQuery veya JavaScript ile işleyebilir veya bir aetiket kullanabilirsiniz , ancak içindeki diğer tüm etiket öğeleri liCSS özelliğine sahip olmalıdır:

pointer-events:none;

Aşağıdaki css'yi uygulamanız yeterlidir:

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

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

işte böyle yaptım

Make <a>inline-block ve dolguyu kaldırın Bir<li>

Sonra birlikte oynayabilir widthve heightbir <a>de<li>

Put widthiçin 100%bir başlangıç olarak ve nasıl çalıştığını görmek

Not: - heightve değiştirirken Chrome Geliştirici Araçlarından yardım alın.width

Liste öğesini tersi yerine köprü içine koyun.

Örneğin kodunuzla:

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