CSS ul li: unikanie podwójnego granic

Question

Mam UL z

border: 1px solid grey; 

zawiera kilka LIS z

border-bottom: 1px dotted grey; 

utrzymać pozycje poza wizualnie. Ale teraz ostatni LI ma przerywaną granicę i UL pełną granicę! To wygląda denerwująco. Jak mogę tego uniknąć? Czy istnieje sposób na umieszczenie granic pomiędzy LI zamiast po nich?

Answer 1

CSS3 selektorów można kierować :first-child lub :last-child, tak:

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

przykład roboczych: http://api.fatherstorm.com/test/4165384.php

Answer 2

Użyj klasę lub selektor CSS3 :last-child usunąć ostatni <li> border-bottom

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

lub

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

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

Answer 3

Wystarczy dodać inną klasę do ostatniego li który określa się nie pokazują granica.

Answer 4

Gładka rozwiązaniem jest użycie plus (+) selector projektować listę:

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

Po prostu dodajesz the following css:

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

Unikasz dodawania dodatkowego selektora i jesteś w stanie utrzymać kod w czystości. Chociaż w zależności od Twoich potrzeb możesz najpierw sprawdzić numer browser compatibilty.