Maison > Article > interface Web > 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 :
Supprimer le remplissage des éléments de la liste :
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: ...; }
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!