Comment faire pour que toute la zone d'un élément de liste dans ma barre de navigation soit cliquable en tant que lien?

Question

J'ai une barre de navigation horizontale faite à partir d'une liste non ordonnée, et chaque élément de la liste a beaucoup de remplissage pour le rendre agréable, mais la seule zone qui fonctionne comme un lien est le texte lui-même. Comment puis-je permettre à l'utilisateur de cliquer n'importe où dans l'élément de la liste pour activer le lien?

#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; 
 
    padding: 25px 10px; 
 
} 
 

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

 
#nav a { 
 
    color: white; 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    text-decoration: none; 
 
}

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

Answer 1

Ne mettez pas le rembourrage dans l'élément 'li'. Au lieu de cela, définissez la balise d'ancrage sur display:inline-block; et appliquez le remplissage.

Answer 2

Faites que l'étiquette d'ancrage contienne le remplissage plutôt que le li. De cette façon, il va prendre toute la zone.

Answer 3

Définissez votre balise d'ancrage propriété css:

{display:block} 

Ensuite, l'ancre occupera toute la zone de liste, de sorte que votre clic fonctionne dans l'espace vide à côté de votre liste.

Answer 4

Placez l'élément de liste dans le lien hypertexte au lieu de l'inverse.

Par exemple avec votre code:

<a href="#"><li>One</li></a> 

Answer 5

Ou vous pouvez utiliser jQuery:

$("li").click(function(){ 
    window.location=$(this).find("a").attr("href"); 
    return false; 
}); 

Answer 6

super, super tard pour ce parti, mais de toute façon: vous pouvez aussi le style de l'ancre comme flex article. Ceci est particulièrement utile pour les éléments de liste de taille/agencement dynamiques.

a { 
    /* This flexbox code stretches the link's clickable 
    * area to fit its parent block. */ 
    display:  flex; 
    flex-grow:  1; 
    flex-shrink: 1; 
    justify-content: center; 
} 

(Caveat:. Flexboxes sont obvs toujours pas bien pris en charge Autoprefixer à la rescousse!)

Answer 7

Utilisation suivant:

a { 
    display: list-item; 
    list-style-type: none; 
} 

Answer 8

Vous devez utiliser cette propriété CSS et la valeur dans votre li:

pointer-events:all; 

Donc, vous pouvez gérer le lien avec jQuery ou JavaScript, ou nous e une étiquette a, mais tous les autres éléments d'étiquette à l'intérieur du li devraient avoir la propriété CSS:

pointer-events:none;