Jak sprawić, aby cały obszar elementu listy na moim pasku nawigacji był klikalny jako łącze?

Mam poziomy pasek nawigacyjny utworzony z nieuporządkowanej listy, a każdy element listy ma dużo wypełnienia, aby ładnie wyglądał, ale jedynym obszarem, który działa jako łącze, jest sam tekst. Jak mogę umożliwić użytkownikowi kliknięcie w dowolnym miejscu elementu listy, aby aktywować łącze?

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

Nie umieszczaj dopełnienia w pozycji „li”. Zamiast tego ustaw znacznik kotwicy na display:inline-block;i zastosuj do niego wypełnienie.

Zdefiniuj właściwość css tagu kotwicy jako:

{display:block}

Następnie kotwica zajmie cały obszar listy, więc kliknięcie będzie działać w pustym miejscu obok listy.

Spraw, aby tag kotwicy zawierał dopełnienie, a nie li. W ten sposób zajmie cały obszar.

Super, bardzo późno na tę imprezę, ale w każdym razie: kotwicę można również stylizować jako element elastyczny. Jest to szczególnie przydatne w przypadku dynamicznie dopasowanych / uporządkowanych elementów listy.

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

(Uwaga: flexboxy nadal nie są dobrze obsługiwane. Autoprefixer na ratunek!)

Użyj następujących:

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

Lub możesz użyć jQuery:

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

Powinieneś użyć tej właściwości i wartości CSS w swoim li:

pointer-events:all;

Możesz więc obsłużyć link za pomocą jQuery lub JavaScript albo użyć atagu, ale wszystkie inne elementy tagu wewnątrz lipowinny mieć właściwość CSS:

pointer-events:none;

Po prostu zastosuj poniższy CSS:

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

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

oto jak to zrobiłem

Zrób <a>blok inline i usuń wyściółkę z<li>

Następnie można grać z widthoraz heightz<a> w<li>

Włóż widthdo 100%jako początek i zobaczyć, jak to działa

PS: - Skorzystaj z pomocy Chrome Developer Tools przy zmianie height iwidth

Umieść element listy w hiperłączu, a nie na odwrót.

Na przykład z Twoim kodem:

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