Comment étendre la zone cliquable des éléments de liste dans les barres de navigation ?

Agrandissement de la zone cliquable des éléments de liste dans les barres de navigation

Les barres de navigation comportent souvent des listes non ordonnées avec des éléments de liste complétés. Cependant, la zone cliquable pour l'activation du lien est généralement limitée au texte lui-même. Pour améliorer l'expérience utilisateur, vous pouvez rendre l'élément de liste entier cliquable.

Solution :

Évitez d'ajouter un remplissage au

élément. Au lieu de cela, appliquez le CSS suivant au balise dans chaque élément de liste :

a {
  display: inline-block;
  padding: [desired padding values];
}

Cela garantit que la zone cliquable s'étend à l'ensemble de l'élément de liste, tout en conservant le remplissage et la mise en page souhaités.

Exemple :

Considérez le HTML et le CSS donnés :

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

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

#nav li {
  display: block;
  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>

En appliquant l'affichage : inline-block ; et les propriétés de remplissage des balises d'ancrage, la zone cliquable de chaque élément de liste s'étend sur toute la largeur de l'élément, sans affecter sa disposition d'origine.

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!