Comment rendre les éléments de la liste de la barre de navigation entièrement cliquables ?

Rendre les éléments de la liste de la barre de navigation entièrement cliquables

Dans une barre de navigation horizontale typique créée à l'aide d'une liste non ordonnée, cliquer n'importe où sur un élément de la liste il est fort probable que l'action ne soit déclenchée que si le curseur se trouve dans le texte du lien lui-même. Pour étendre la zone cliquable à l'ensemble de l'élément de liste, modifiez le HTML et le CSS comme suit :

CSS :

<code class="css">#nav li a {
  display: inline-block;
  padding: 25px 10px;
}</code>

En supprimant le remplissage du 'li ' et en l'ajoutant aux balises d'ancrage, la zone cliquable est désormais étendue pour remplir toute la largeur et la hauteur de l'élément de liste.

HTML :

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

Désormais, les utilisateurs peuvent cliquer n'importe où dans les éléments de la liste pour activer les liens correspondants, offrant ainsi une barre de navigation plus conviviale.

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!