CSS ul li: éviter les doubles frontières

Question

J'ai un UL avec

border: 1px solid grey; 

il contient plusieurs LIs avec

border-bottom: 1px dotted grey; 

pour garder les objets à part visuellement. Mais maintenant le dernier LI a la bordure en pointillés et la bordure solide UL! Cela a l'air agaçant. Comment puis-je éviter cela? Y at-il un moyen de mettre des frontières entre les LI au lieu de les après?

Answer 1

sélecteurs CSS3 peuvent cibler :first-child ou :last-child, comme ceci:

ul { 
    border: 1px solid grey; 
} 
li { 
    border-bottom: 1px dotted grey; 
} 
li:last-child { 
    border:none; 
} 

Un exemple de réalisation: http://api.fatherstorm.com/test/4165384.php

Answer 2

Utilisez une classe ou le sélecteur de CSS3 :last-child pour enlever la dernière <li> border-bottom

ul li:last-child { border-bottom:0; } 

ou

<ul> 
    <li>1</li> 
    <li>2</li> 
    <li class="last">3</li> 
</ul> 

ul li.last { border-bottom:0; } 

Answer 3

Il suffit d'ajouter une autre classe à la dernière li qui précise pour ne pas afficher une frontière.

Answer 4

Une solution douce est d'utiliser le plus (+) selector pour le style de la liste:

<ul> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
</ul> 

Vous venez d'ajouter the following css:

li + li { 
    border-top: 1px dotted grey; 
} 

Vous évitez d'ajouter un sélecteur supplémentaire et vous pouvez garder le code plus propre. Bien que selon vos besoins, vous pouvez d'abord vérifier browser compatibilty.