Pouvez-vous utiliser différentes images d'icône pour chaque élément de la liste dans une liste non ordonnée?
Je ne suis pas un utilisateur avancé de CSS, mais j'ai une connaissance de travail décentes, je suppose. Je suis tryin pour faire une liste non-ordonnée qui utilise des icônes différentes pour chaque élément de la liste. Je voudrais également que la couleur de fond de l'élément de la liste pour changer lors d'un hover.
Est-il un moyen de le faire via le CSS, ou voulez-vous simplement d'inclure l'icône de l'image à l'intérieur d'un élément de liste (comme ci-dessous)?
<li><img src="voters.jpg"><a href="voters.html">Voters</a></li>
À l'aide de la list-style-image sur le ul niveau en fait toutes les icônes de la même, et je n'ai pas été en mesure de découvrir une autre façon. La plupart des exemples que j'ai trouvé à vous apprendre à utiliser les images dans une liste, mais seulement si les puces les images sont les mêmes. Je suis vraiment ouvert à toutes les suggestions et améliorations sur la façon dont je suis en train de le faire.
grâce
<div class="content-nav">
<ul>
<li class="instructions"><a href="instructions.html">Instructions</a></li>
<li class="voters"><a href="voters.html">Voters</a></li>
</ul>
</div>
.content-nav {
font-size:12px;
width:160px;
z-index:0;
}
.content-nav ul {
padding:0 20px;
margin:30px 0;
}
.content-nav li {
padding:5px;
margin:5px 5px;
}
.content-nav li a {
color:#666;
text-decoration:none;
}
.content-nav li.voters a {
background:#FFF;
color:#666;
text-decoration:none;
list-style-image:url(images/voters.jpg);
}
.content-nav li.voters a:hover {
background:#0CF;
color:#000;
}
.content-nav li.instructions a {
background:#FFF;
color:#666;
text-decoration:none;
list-style-image:url(images/voters.jpg);
}
.content-nav li.instructions a:hover {
background:#0CF;
color:#000;
}
source d'informationauteur Patrick
Vous devez vous connecter pour publier un commentaire.
Vous pouvez ajouter des images d'arrière-plan sur chaque élément de la liste, et l'utilisation de rembourrage pour pousser le texte loin de lui.
Assurez-vous que le padding-left de la même taille que l'image (ou un peu plus si vous voulez espacement)
À l'aide de CSS3 est
:nth-child()
sélecteur, ne nécessite pas une annotation supplémentaire sur chaque<li>
élément:Démonstration En Direct
HTML:
CSS:
Prise en charge du navigateur: IE9+, FF3.5+, SA3.1+, OP9.5+ CH2+
Je suggère d'utiliser les icônes en arrière-plan des images pour chaque élément de la liste. Avec cette approche, vous pouvez facilement positionner le "bullet points" aussi (surtout de positionnement horizontal).
Vous essayez de définir la
list-style-image
de la propriété sur unea
élément. Essayez sur lali
élément la place.Si vous souhaitez utiliser des icônes différentes pour chaque liste, que d'attribuer à chaque liste un nom unique et utiliser background-image et la position appropriée dans le CSS.