Comment rendre des éléments de liste entiers cliquables dans une barre de navigation ?

Activer les éléments de navigation cliquables dans toute la zone de liste

Lors de la conception d'une barre de navigation, vous pouvez rencontrer une situation dans laquelle vous souhaitez que la zone entière d'un élément de liste pour fonctionner comme un lien cliquable, malgré un rembourrage suffisant pour un attrait esthétique. Ce guide explique comment obtenir ce comportement.

Approche

Pour activer les éléments de liste cliquables dans votre barre de navigation, suivez ces étapes :

1. Supprimer le remplissage des éléments de la liste :

   • S'abstenir d'ajouter un remplissage à l'élément « li ». Le remplissage appliqué aux éléments de la liste limitera les zones cliquables au texte uniquement.

2. Améliorer les balises d'ancrage :

   • Modifiez les balises d'ancrage ( éléments) pour afficher le bloc en ligne :

     #nav a {
       display: inline-block;
       padding: ...;
     }

   • Appliquez un remplissage aux balises d'ancrage au lieu des éléments « li » pour contrôler les zones cliquables.

Utilisation

Dans l'exemple fourni, les modifications suivantes permettront la cliquabilité dans toutes les zones d'éléments de la liste :

#nav li {
  padding: 0;
}

#nav a {
  display: inline-block;
  padding: 25px 10px;
}

Exemple de code

<code class="css">#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;
  padding:0;
}

#nav li {
  float: left;
}

#nav li:hover {
  background-color: #785442;
}

#nav a {
  color: white;
  font-family: Helvetica, Arial, sans-serif;
  text-decoration: none;
  display: inline-block;
  padding: 25px 10px;
}</code>

<code class="html"><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></code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!