Come faccio a rendere l'intera area di una voce di elenco nella mia barra di navigazione, cliccabile come collegamento?

Ho una barra di navigazione orizzontale composta da un elenco non ordinato e ogni elemento dell'elenco ha un sacco di imbottitura per renderlo piacevole, ma l'unica area che funziona come collegamento è il testo stesso. Come posso consentire all'utente di fare clic in un punto qualsiasi della voce di elenco per attivare il collegamento?

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

Non inserire imbottitura nell'elemento "li". Invece imposta il tag di ancoraggio su display:inline-block;e applica il riempimento ad esso.

Definisci la tua proprietà CSS del tag di ancoraggio come:

{display:block}

Quindi l'ancora occuperà l'intera area dell'elenco, quindi il tuo clic funzionerà nello spazio vuoto accanto all'elenco.

Fai in modo che il tag di ancoraggio contenga il riempimento anziché il li. In questo modo, occuperà tutta l'area.

Super, super tardi per questa festa, ma comunque: puoi anche modellare l'ancora come un oggetto flessibile. Ciò è particolarmente utile per gli elementi di elenco dimensionati / disposti dinamicamente.

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

(Avvertenza: i flexbox sono ovvi ancora non ben supportati. Autoprefixer in soccorso!)

Usa quanto segue:

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

Oppure potresti usare jQuery:

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

Dovresti usare questa proprietà e valore CSS nel tuo li:

pointer-events:all;

Quindi, puoi gestire il collegamento con jQuery o JavaScript o utilizzare un atag, ma tutti gli altri elementi del tag all'interno lidovrebbero avere la proprietà CSS:

pointer-events:none;

Basta semplicemente applicare il seguente css:

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

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

ecco come l'ho fatto

Crea il <a>blocco in linea e rimuovi l'imbottitura dal tuo<li>

Quindi puoi giocare con il widthe il heightdel <a>in<li>

Metti la widtha 100%come inizio e guarda come funziona

PS: - Ottieni l'aiuto degli Strumenti per sviluppatori di Chrome quando cambi il heightewidth

Puoi sempre racchiudere l'intero tag li in con il tag hiperlink Ecco la mia soluzione:

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

Metti l'elemento dell'elenco all'interno del collegamento ipertestuale anziché viceversa.

Ad esempio con il tuo codice:

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