CSS
Styles de liste

Syntaxe

• liste-style: list-style-type | position de style de liste | liste-style-image | initiale | hériter;

Paramètres

Remarques

Type de balle ou de numérotation

Spécifique pour les balises <li> dans une liste non ordonnée ( <ul> ):

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

Spécifique pour les balises <li> dans une liste ordonnée ( <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., ...) */

Non spécifique:

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

Position de la balle

Une liste est composée d'éléments <li> intérieur d'un élément contenant ( <ul> ou <ol> ). Les éléments de liste et le conteneur peuvent avoir des marges et des remplissages qui influencent la position exacte du contenu de l'élément de liste dans le document. Les valeurs par défaut pour la marge et le remplissage peuvent être différentes pour chaque navigateur. Afin d'obtenir la même mise en page multi-navigateur, ceux-ci doivent être définis spécifiquement.

Chaque élément de la liste reçoit une "zone de marqueur" contenant le marqueur de puce. Cette case peut être placée à l'intérieur ou à l'extérieur de la zone de liste.

list-style-position: inside;

place la puce dans l'élément <li> , en poussant le contenu vers la droite si nécessaire.

list-style-position: outside;

place la puce à gauche de l'élément <li> . S'il n'y a pas assez d'espace dans le remplissage de l'élément contenant, la zone de marqueur s'étendra vers la gauche, même si elle venait à tomber de la page.

Affichage du résultat du positionnement inside et outside : jsfiddle

Suppression des puces / numéros

Parfois, une liste ne doit afficher aucun point ou chiffre. Dans ce cas, n'oubliez pas de spécifier la marge et le remplissage.

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

CSS

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