Webdesign 101 » CSS » Formatering af HTML-lister

Vandrette lister

Du er sikkert vant til at tænke på ordnede og uordnede lister som en række punkter stablet oven på hinanden. Men lige så tit har vi brug for listens struktur inline - det vil sige som en liste af ting, der indgår i en tekstmæssig sammenhæng.

Med stylesheets kan det lade sig gøre at lave sådanne vandrette eller inline lister. Denne artikel forklarer hvordan.

Denne tekst er den første del af et tekststykke, hvori der forekommer en liste over soslsystemets planeter i den orden, de oftest nævnes, nemlig fra solen og udad. En sådan ordnet liste, uden nogen form for formatering, ser således ud: 

  1. Merkur
  2. Venus
  3. Jorden
  4. Mars
  5. Jupiter
  6. Saturn
  7. Uranus
  8. Neptun
  9. Pluto

Eksempel 9: 

Mit mål her er at nævne disse planeter inline i en liste, således at den del af teksten, der omfatter planeternes navne, har den ordnede listes struktur. Det vil sige, at listen kommer til at se således ud:

  1. Merkur,
  2. Venus,
  3. Jorden,
  4. Mars,
  5. Jupiter,
  6. Saturn,
  7. Uranus,
  8. Neptun,
  9. Pluto.

Listen ku' lisså godt ha' været en litteraturliste, en liste over links eller hvad som helst andet, du har brug for at skrive som en del af en tekst, men som skal have listens struktur.

Det bedste ville være at en sådan inline liste var fuldstændigt integreret i et tekstafsnit. Imidlertid forbyder HTML-specifikationen at have en tekstblok inde i en anden tekstblok. Derfor er jeg nødt til at lave en usynlig afsnitsdeling, efter følgende skema:

<div id="liste-inline">
    Tekststykket umiddelbart før listen, indrammet af <p>...<p>
    Listen (en almindelig ordnet liste)
    Tekststykket umiddelbart efter listen, indrammet af <p>...<p>
</div>

Dernæst stylesheet'et: Her bruger vi en af de mere sjældne egenskaber ved display-attributten, nemlig display:inline, der fjerner linieskift efter det element. som jeg giver egenskaben:

#liste-inline {
margin-left:10px;margin-right:10px;
}
#liste-inline p {
display:inline;
text-indent:-20px;
}
#liste-inline ol, #liste-inline li {
display:inline;
margin:0;
padding:0;
color:#c00;
}
#liste-inline ol {
margin-left:-15px;
margin-right:-20px;
}

I stylesheet'tet herover er de de formregler, der er markeret med rødt, der er de kritiske. Resten er den formatering, der skal til, for at eksemplet tager sig pænt ud i lige præcis den sammenhæng, eksemplet vises, det vil sige på denne webside, der jo overordnet har en del genskaber, der arves af en liste.

Senest opdateret: 9. nov. 2002.