Comment faire en sorte que toute la zone d'un élément de liste dans ma barre de navigation soit cliquable en tant que lien ?

Question

J'ai une barre de navigation horizontale faite à partir d'une liste non ordonnée, et chaque élément de la liste a beaucoup de remplissage pour que ce soit joli, mais la seule zone qui fonctionne comme un lien est le texte lui-même. Comment puis-je permettre à l'utilisateur de cliquer n'importe où dans l'élément de la liste pour activer le lien ?

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

Answer 1

Ne mettez pas de remplissage dans l'élément "li". Définissez plutôt la balise d'ancrage à display:inline-block; et y appliquer du rembourrage.

Answer 2

Définissez la propriété css de votre balise d'ancrage comme suit :

{display:block}

L'ancre occupera alors toute la zone de la liste, de sorte que votre clic fonctionnera dans l'espace vide à côté de votre liste.

Answer 3

Faites en sorte que la balise d'ancrage contienne le padding plutôt que le li . De cette façon, il occupera toute la surface.

Answer 4

Ou vous pouvez utiliser jQuery :

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

Answer 5

Placez l'élément de la liste dans l'hyperlien au lieu de l'inverse.

Par exemple avec votre code :

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