Een lijst met meerdere niveaus maken in HTML

Het maken van een lijst met meerdere niveaus in HTML is moeilijker dan het maken van een lijst met meerdere niveaus in een tekstverwerker, maar kan nog steeds worden bereikt met HTML en CSS. Hieronder vindt u stappen voor het maken van een lijst met meerdere niveaus in HTML met behulp van CSS.

Voordat u de volgende stappen uitprobeert, moet u zich realiseren dat u een lijst met meerdere niveaus in HTML moet nesten in een ander lijstitem. Omdat HTML alleen een lijst met opsommingstekens of een lijst met nummers heeft, moet u CSS gebruiken om een ​​nieuw stijltype te maken als u het type lijst wilt wijzigen.

HTML-voorbeeld

Hieronder ziet u een voorbeeld van hoe een lijst op meerdere niveaus in HTML kan worden gemaakt met HTML en de CSS-stijl die in de HTML-tags is gedefinieerd. In dit voorbeeld hebben we twee lijstitems en in het tweede lijstitem een ​​andere geordende lijst met een lager-alfalijst-stijltype om een ​​a, b, enz. Lijststijl te maken.

  1. Eerste
  2. Tweede 
    1. Sub van de tweede
    2. Een andere sub
  3. Derde
  4. Vierde

Opmerking: in ons voorbeeld hierboven gebruiken we enkele extra vulling- en margestijlen om ons aan te passen aan onze algemene CSS-waarden en om een ​​voorbeeld te geven van hoe u ruimte en inspringen kunt toevoegen of verminderen.

Voorbeeld van uitvoer

  1. Eerste
  2. Tweede
    1. Sub van de tweede
    2. Een andere sub
  3. Derde
  4. Vierde

CSS en HTML-voorbeeld

De bovenstaande oplossing werkt geweldig als je maar een paar keer een lijst met meerdere niveaus hoeft aan te maken. Als u echter meerdere lijsten met meerdere niveaus op uw site wilt hebben, is het een beter idee om CSS-code op te nemen, vergelijkbaar met het onderstaande voorbeeld, in uw CSS-bestand. In ons voorbeeld hebben we twee klassen gemaakt met de naam 'romein' en 'vierkant' en deze in de HTML-code genoemd.

CSS-code 

 .roman {list-style-type: lower-roman;}. square {list-style-type: square; marge links: -2em;}

HTML code 

  • Eerste
  • Tweede 
    • Sub van de tweede
    • Een andere sub
  • Derde
  • Vierde

Voorbeeld van uitvoer

  • Eerste
  • Tweede
    • Sub van de tweede
    • Een andere sub
  • Derde
  • Vierde

Beschikbare CSS-lijststijlen

Hieronder vindt u een lijst met andere CSS-lijststijlwaarden die kunnen worden gebruikt in plaats van de voorbeelden die we eerder hebben laten zien. We hebben ook een korte beschrijving van elke waarde opgenomen.

Opmerking: Niet alle waarden werken of lijken in alle browsers hetzelfde.

schijf - Kleine dichte cirkel (hierboven weergegeven).

cirkel - Kleine lege cirkel (hierboven weergegeven).

square - Solid square.

decimaal - decimaal getal beginnend met "1" (hierboven weergegeven).

decimal-leading-zero - Decimaal getal beginnend met 0 (bijv. 01, 02, 03, etc.).

lower-roman - Romeins cijfer in kleine letters beginnend met "i.".

upper-roman - Romeins cijfer in hoofdletters beginnend met "I.".

lager-Grieks - Kleine letters Grieks.

lager-Latijn - Latijn in kleine letters

upper-latin - Latijnse hoofdletters

armeens - traditionele Armeense nummering

Georgisch - Traditionele Georgische nummering

lower-alpha - Letterlijke letters van kleine letters beginnend met "a." (hierboven weergegeven).

upper-alpha - Alfabetische letters in hoofdletters beginnend met "A.".

geen - niets weergeven.