Skapa listor - Skapa och Formatera Lista med CSS

I den här artikeln lär du dig skapa en lista på den webbsida som vi började jobba på tidigare. Du lär dig också att använda CSS-egenskapen display för att skriva ut listan horisontellt istället för vertikalt. Till sist visar jag hur du kan använda pseudoklassen first:child för att endast påverka det första listelementet.

Skapa en lista

Det finns två typer av listor: numrerade listor (ol), onumrerade listor (ul) och definitionslistor (dl). I det här exemplet använder vi oss av en onumrerad lista och tanken är att vi ska använda en lista för att hålla länkarna som vi lagt uppe i sidhuvudet. Det är mer naturligt att använda ett en lista som hållare för navigationslänkar än att använda exempelvis taggen p för stycke.

Ersätt dina länkar i koden i sidhuvudet med följande kod:

<ul> <li><a href="#">Länk 1</a></li> <li><a href="#">Länk 1</a></li> <li<a href="#">Länk 1</a></li> </ul>

Gör en horisontell lista med CSS

För att göra så att listelementen <li> visas horisontellt, så lägger du till detta i CSS-filen som skapade tidigare:

div#sidhuvud li { display:inline; }

Eftersom länkarna kommer att ligga för tätt inpå varandra så skapar vi en högerpadding för varje listelement så här:

div#sidhuvud li { display:inline; padding-right: 12px; }

Du kan skapa en kantlinje som skiljer elementen åt:

div#sidhuvud li { display:inline; padding-right: 12px; border-right: solid 1px;}

Det blir dock snyggare om vi har padding på både höger och vänster sida då vi använder kantlinje. Vi ersätter höger-paddingen på 12px med en vänsterpadding på 6px och en högerpadding på 6px:

div#sidhuvud li { display:inline; padding-left: 6px; padding-right: 6px; border-right: solid 1px;}

First child

Ibland kan det vara bra att kunna en kantlinje även på elementet längst till vänster för att få en enhetlig design. Att lägga en border-left på alla element blir dock fult eftersom den egenskapen kommer att "krocka" med element som använder sig av border-right, vilket skapar dubbelkanter.

För att lösa problemet använder vi oss av en pseudoklass.

Lägg till detta i stilmallen för att skapa en kant på enbart det första listelementet i navigationsmenyn:

div#sidhuvud ul:first-child { border-left: solid 1px ;}

"First-child" betyder direktöversatt "första barnet". Första barnet till taggen ul får med denna kod tillagd i stilmallen en 1 pixels solid kantlinje.

Kommentar: Om ett element (2) ligger inuti ett annat element (1) så räknas det som ett barn till 1. Motsatsen till first-child är last:child, som påverkar det sista elementet och fungerar på samma sätt.