Sådan oprettes en liste over flere niveauer i HTML

Oprettelse af en liste med flere niveauer i HTML er sværere end at oprette en liste over flere niveauer i en tekstbehandler, men kan stadig opnås ved hjælp af HTML og CSS. Nedenfor er trin til, hvordan man opretter en liste med flere niveauer i HTML ved hjælp af CSS.

Inden du forsøger de følgende trin, skal du indse, at hvis du vil oprette en liste med flere niveauer i HTML, skal du genstille listen i et andet listeelement. Også fordi HTML kun har en punktliste eller nummerliste, hvis du vil ændre typen af ​​liste, skal du bruge CSS til at oprette en ny stiltype.

HTML eksempel

Nedenfor er et eksempel på, hvordan en multilevel liste kan udføres i HTML ved hjælp af HTML og CSS-stilen defineret i HTML-tags. I dette eksempel har vi to listeposter og i den anden listepost en anden ordnet liste med en alfabetisk listestil for at oprette en a, b, etc. listestil.

  1. Først
  2. Sekund 
    1. Del af Andet
    2. En anden del
  3. Tredje
  4. Fjerde

Bemærk: I vores eksempel ovenfor bruger vi nogle ekstra polstring og margen stilarter til at hjælpe med at tilpasse sig vores globale CSS-værdier og give et eksempel på, hvordan du kan tilføje eller reducere mellemrum og indrykning.

Eksempel på output

  1. Først
  2. Sekund
    1. Del af Andet
    2. En anden del
  3. Tredje
  4. Fjerde

CSS og HTML eksempel

Ovenstående løsning fungerer godt, hvis du kun skal oprette en liste over flere niveauer et par gange. Men hvis du har til hensigt at have flere multilevel lister over hele dit websted, ville det være en bedre ide at medtage CSS-kode, som ligner eksemplet nedenfor, i din CSS-fil. I vores eksempel skabte vi to klasser kaldet "roman" og "square" og kalder dem i HTML-koden.

CSS kode 

 .roman {listestil-type: lavere romerske;}. firkant {listestil-type: square; margin-left: -2em;}

HTML kode 

  • Først
  • Sekund 
    • Del af Andet
    • En anden del
  • Tredje
  • Fjerde

Eksempel på output

  • Først
  • Sekund
    • Del af Andet
    • En anden del
  • Tredje
  • Fjerde

Tilgængelige CSS listestil-type værdier

Nedenfor er en oversigt over andre CSS-listetyper, der kan bruges i stedet for de eksempler, vi viste tidligere. Vi har også medtaget en kort beskrivelse af hver værdi.

Bemærk: Ikke alle disse værdier virker eller vises ens i alle browsere.

disk - Lille solid cirkel (vist ovenfor).

cirkel - Lille tom cirkel (vist ovenfor).

square - Solid square.

decimal - decimalnummer begyndende med "1." (vist ovenfor).

decimal-førende-nul - decimalnummer begyndende med 0 (f.eks. 01, 02, 03, etc.).

lavere romerske - bogstaverne latinske tal begyndende med "i.".

øverste romerske - store bogstaver med begyndelsen af ​​"I.".

lavere græsk - små bogstaver græsk.

lavere latin - små bogstaver latin

upper-latin - store bogstaver

armensk - traditionel armensk nummerering

georgian - traditionel georgisk nummerering

lavere alfa - bogstaver i små bogstaver begynder med "a." (vist ovenfor).

øvre alfa - bogstaver med stor bogstav begyndende med "A.".

ingen - ikke vise noget