Comment rendre toute la zone d'un élément de liste dans ma barre de navigation, cliquable sous forme de lien?

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 le rendre joli, mais la seule zone qui fonctionne comme lien est le texte lui-même. Comment puis-je permettre à l'utilisateur de cliquer n'importe où dans l'élément de 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>

Ne mettez pas de remplissage dans l'élément «li». Au lieu de cela, définissez la balise d'ancrage sur display:inline-block;et appliquez-lui un remplissage.

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

{display:block}

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

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

Super, très tard à cette fête, mais de toute façon: vous pouvez également coiffer l'ancre comme un élément flexible. Ceci est particulièrement utile pour les éléments de liste dimensionnés / organisés dynamiquement.

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

(Attention: les flexbox sont obvs toujours pas bien supportés. Autoprefixer à la rescousse!)

Utilisez ce qui suit:

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

Ou vous pouvez utiliser jQuery:

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

Vous devez utiliser cette propriété et cette valeur CSS dans votre li:

pointer-events:all;

Ainsi, vous pouvez gérer le lien avec jQuery ou JavaScript, ou utiliser une abalise, mais tous les autres éléments de balise à l'intérieur du lidevraient avoir la propriété CSS:

pointer-events:none;

Appliquez simplement le CSS ci-dessous:

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

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

voici comment je l'ai fait

Créez le <a>bloc en ligne et supprimez le rembourrage de votre<li>

Ensuite, vous pouvez jouer avec le widthet le heightdu <a>dans le<li>

Mettez le widthà 100%un départ et voir comment cela fonctionne

PS: - Obtenez l'aide des outils de développement Chrome lors du changement de heightetwidth

Vous pouvez toujours envelopper la balise entière li avec la balise hiperlink Voici ma solution:

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

Placez l'élément de liste dans le lien hypertexte au lieu de l'inverse.

Par exemple avec votre code:

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