list-style-position
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La propriété CSS list-style-position permet de définir la position du marqueur (cf. ::marker) de liste par rapport à la boîte principale.
Exemple interactif
list-style-position: inside;
list-style-position: outside;
<section class="default-example" id="default-example">
<div>
<p>Missions remarquables de la NASA</p>
<ul class="transition-all" id="example-element">
<li>Apollo 11 : premier alunissage humain</li>
<li>Ville dans l'espace : la Station spatiale internationale</li>
<li>Grand observatoire : le télescope spatial Hubble</li>
<li>Rovers martiens éternels</li>
</ul>
</div>
</section>
.default-example {
font-size: 1.2rem;
}
#example-element {
width: 100%;
background: #be094b;
color: white;
}
section {
text-align: left;
flex-direction: column;
}
hr {
width: 50%;
color: lightgray;
margin: 0.5em;
}
.note {
font-size: 0.8rem;
}
.note a {
color: #009e5f;
}
@counter-style space-counter {
symbols: "\1F680" "\1F6F8" "\1F6F0" "\1F52D";
suffix: " ";
}
Syntaxe
/* Valeurs avec un mot-clé */
list-style-position: inside;
list-style-position: outside;
/* Valeurs globales */
list-style-position: inherit;
list-style-position: initial;
list-style-position: revert;
list-style-position: revert-layer;
list-style-position: unset;
La propriété list-style-position est définie avec l'un des mots-clés suivants.
Valeurs
inside-
La boîte du marqueur (
::marker) est la première boîte en ligne (inline) de la boîte principale. Le contenu de l'élément sera appliqué à la suite de la boîte du marqueur. outside-
La boîte du marqueur (
::marker) est en dehors de la boîte principale. C'est la valeur par défaut pourlist-style.
Description
Cette propriété s'applique aux éléments de liste, c'est-à-dire aux éléments avec display: list-item;. Par défaut (angl.), cela inclut les éléments HTML <li>. Parce que cette propriété est héritée, elle peut être définie sur l'élément parent (normalement <ol> ou <ul>) pour qu'elle s'applique à tous les éléments de liste.
Si un élément de bloc est le premier enfant d'un élément de liste déclaré avec list-style-position: inside, alors l'élément de bloc est placé sur la ligne après la boîte du marqueur.
Il est souvent plus pratique d'utiliser la propriété raccourcie list-style.
Définition formelle
| Valeur initiale | outside |
|---|---|
| Applicabilité | éléments de liste |
| Héritée | oui |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
Syntaxe formelle
list-style-position =
inside |
outside
Exemples
Définition de la position des éléments d'une liste
HTML
<ul class="un">
Liste 1
<li>Élément 1-1</li>
<li>Élément 1-2</li>
<li>Élément 1-3</li>
<li>Élément 1-4</li>
</ul>
<ul class="deux">
Liste 2
<li>Élément 2-1</li>
<li>Élément 2-2</li>
<li>Élément 2-3</li>
<li>Élément 2-4</li>
</ul>
<ul class="trois">
Liste 3
<li>Élément 3-1</li>
<li>Élément 3-2</li>
<li>Élément 3-3</li>
<li>Élément 3-4</li>
</ul>
CSS
.un {
list-style-position: inside;
list-style-type: square;
}
.deux {
list-style-position: outside;
list-style-type: circle;
}
.trois {
list-style-position: inside;
list-style-image: url("star-solid.gif");
}
Résultat
Spécifications
| Specification |
|---|
| CSS Lists and Counters Module Level 3 # list-style-position-property |
Compatibilité des navigateurs
Voir aussi
- La propriété raccourcie
list-style - La propriété
list-style-type - La propriété
list-style-image - Le pseudo-élément
::marker - Le module des listes et compteurs CSS
- Le module des styles de compteur CSS