Recherche…


Syntaxe

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

Paramètres

Valeur La description
type liste-style le type de marqueur d'élément de liste.
position de style de liste spécifie où placer le marqueur
liste-style-image spécifie le type de marqueur d'élément de liste
initiale définit cette propriété à sa valeur par défaut
hériter hérite de cette propriété de son élément parent

Remarques

Bien que list-style-type soit en fait une propriété qui s'applique uniquement aux éléments de liste (normalement <li> ), elle est souvent spécifiée pour la balise list ( <ol> ou <ul> ). Dans ce cas, les éléments de liste héritent de la propriété.

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;
}


Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow