CSS ul li: Vermeidung von Doppel Grenzen

Question

Ich habe eine UL mit

border: 1px solid grey; 

es enthält mehrere LIs mit

border-bottom: 1px dotted grey; 

die Elemente auseinander zu halten visuell. Aber jetzt hat der letzte LI die gepunktete Grenze und die UL-Grenze! Das sieht nervig aus. Wie kann ich das vermeiden? Gibt es eine Möglichkeit, Grenzen zwischen LIs zu setzen statt ihnen nachzugehen?

Answer 1

CSS3 Selektoren können :first-child oder :last-child, wie dieses Ziel:

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

Ein Arbeitsbeispiel: http://api.fatherstorm.com/test/4165384.php

Answer 2

eine Klasse verwenden oder den CSS3 Selektor :last-child die letzten <li> border-bottom

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

oder

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

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

Answer 3

nur fügt eine andere Klasse die letzten li zu entfernen, die eine nicht zeigen angibt Rand.

Answer 4

Eine glatte Lösung ist, die plus (+) selector zu verwenden, um die Liste zu ART:

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

Sie fügen einfach :

hinzu 10

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

Sie vermeiden das Hinzufügen eines zusätzlichen Selektors und können den Code sauberer halten. Abhängig von Ihren Bedürfnissen möchten Sie vielleicht zuerst browser compatibilty überprüfen.