CSS
Lijst met stijlen

Syntaxis

• list-style: list-style-type | lijst-stijl-positie | lijst-stijl-afbeelding | voorletter | erven;

parameters

Opmerkingen

Type opsommingsteken of nummering

Specifiek voor <li> -tags in een ongeordende lijst ( <ul> ):

list-style: disc;                /* A filled circle (default) */
list-style: circle;              /* A hollow circle */
list-style: square;              /* A filled square */
list-style: '-';                 /* any string */

Specifiek voor <li> -tags binnen een geordende lijst ( <ol> ):

list-style: decimal;             /* Decimal numbers beginning with 1 (default) */
list-style: decimal-leading-zero;/* Decimal numbers padded by initial zeros (01, 02, 03, … 10) */
list-style: lower-roman;         /* Lowercase roman numerals (i., ii., iii., iv., ...) */
list-style: upper-roman;         /* Uppercase roman numerals (I., II., III., IV., ...) */
list-style-type: lower-greek;    /* Lowercase roman letters (α., β., γ., δ., ...) */
list-style-type: lower-alpha;    /* Lowercase letters (a., b., c., d., ...) */
list-style-type: lower-latin;    /* Lowercase letters (a., b., c., d., ...) */
list-style-type: upper-alpha;    /* Uppercase letters (A., B., C., D., ...) */
list-style-type: upper-latin;    /* Uppercase letters (A., B., C., D., ...) */

Niet-specifieke:

list-style: none;                /* No visible list marker */
list-style: inherit;             /* Inherits from parent */

Opsommingsteken

Een lijst bestaat uit <li> elementen binnen een bevattend element ( <ul> of <ol> ). Zowel de lijstitems als de container kunnen marges en opvullingen hebben die de exacte positie van de inhoud van de lijstitem in het document beïnvloeden. De standaardwaarden voor de marge en opvulling kunnen voor elke browser verschillen. Om dezelfde lay-out cross-browser te krijgen, moeten deze specifiek worden ingesteld.

Elk lijstitem krijgt een 'markeervak', dat de opsommingsteken bevat. Dit vak kan binnen of buiten het vak met lijstitems worden geplaatst.

list-style-position: inside;

plaatst de opsommingsteken in het element <li> en duwt de inhoud indien nodig naar rechts.

list-style-position: outside;

plaatst de opsommingsteken links van het element <li> . Als er onvoldoende ruimte is in de opvulling van het bevattende element, schuift de markeerdoos naar links uit, zelfs als deze van de pagina zou vallen.

Resultaat van de positionering inside en outside : jsfiddle

Opsommingstekens / nummers verwijderen

Soms moet een lijst gewoon geen opsommingstekens of nummers weergeven. Vergeet in dat geval niet om marge en opvulling op te geven.

<ul>
    <li>first item</li>
    <li>second item</li>
</ul>

CSS

ul {
    list-style-type: none;
}
li {
    margin: 0;
    padding: 0;
}