CSS ul li: Evitar bordes dobles

Question

Tengo un UL con

border: 1px solid grey; 

que contiene varios lis con

border-bottom: 1px dotted grey; 

para mantener los elementos separados visualmente. ¡Pero ahora el último LI tiene el borde punteado y el borde sólido UL! Esto parece molesto ¿Cómo puedo evitar eso? ¿Hay alguna manera de poner fronteras entre LI en lugar de posponerlas?

Answer 1

selectores CSS3 pueden orientar :first-child o :last-child, como este:

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

Un ejemplo de trabajo: http://api.fatherstorm.com/test/4165384.php

Answer 2

utilizar una clase o el selector CSS3 :last-child para eliminar el último <li> border-bottom

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

o

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

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

Answer 3

Sólo tiene que añadir una clase diferente a la última li que especifica que no muestran una frontera.

Answer 4

Una solución suave es utilizar el plus (+) selector el estilo de la lista:

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

Usted acaba de agregar the following css:

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

Evita agregar un selector adicional y puede mantener el código más limpio. Aunque, según sus necesidades, es posible que desee verificar browser compatibilty primero.