Maison  >  Article  >  interface Web  >  Comment étendre la zone cliquable des éléments de liste dans les barres de navigation ?

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

DDD
DDDoriginal
2024-11-01 01:30:01390parcourir

How to Extend the Clickable Area of List Items in Navigation Bars?

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!

  • Déclaration:
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn