Comment puis-je rendre toute la zone d'un élément de liste dans ma barre de navigation cliquable en tant que lien?
J'ai une barre de navigation horizontale faite à partir d'une liste non ordonnée, et chaque élément de 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 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>9 réponses
Ne mettez pas de remplissage dans l'élément 'li'. Au lieu de cela, définissez la balise d'ancrage sur display:inline-block; et appliquez-y un remplissage.
Définissez votre propriété CSS de balise d'ancrage comme suit:
{display:block}
Ensuite, l'ancre occupera toute la zone de liste, de sorte que votre clic fonctionnera dans l'espace vide à côté de votre liste.
Faire en sorte que la balise d'ancrage contienne le remplissage plutôt que le li. De cette façon, il prendra toute la région.
Super, Super tard à cette fête, mais de toute façon: vous pouvez également styliser l'ancre comme un élément flexible. Ceci est particulièrement utile pour les éléments de liste de taille dynamique/arrangés.
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;
}
(Mise en garde: les flexboxes sont toujours mal supportés. Autoprefixer à la rescousse!)
Utiliser ce qui suit:
a {
display: list-item;
list-style-type: none;
}
Ou vous pouvez utiliser jQuery:
$("li").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
Vous devez utiliser cette propriété et cette valeur CSS dans votre li:
pointer-events:all;
Ainsi, vous pouvez gérer le lien avec jQuery ou JavaScript, ou utiliser une balise a, mais tous les autres éléments de balise à l'intérieur de li devraient avoir la propriété CSS:
pointer-events:none;
Vous pouvez toujours envelopper toute la balise li avec la balise hiperlink Voici ma solution:
#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;
text-align: center;
float: left;
width: 40px;
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>
<a href="#"><li>One1</li></a>
<a href="#"><li>Two</li></a>
<a href="#"><li>Three</li></a>
<a href="#"><li>Four</li></a>
</ul>
</div>
<div>
<h2>Heading</h2>
</div>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>