list-style-position |
Position de la liste de style |
CSS |
|
Syntaxe
list-style-position: paramètres;
|
Paramètres
Paramètre |
Description |
paramètres |
Ce paramètre de propriété permet d'indiquer le type de positionnement : |
inside |
Cette valeur permet d'indiquer de mettre à l'intérieur le marqueur et le texte. |
outside |
Cette valeur permet d'indiquer de garder le marqueur à la gauche du texte. |
Description
Cette propriété permet d'indiquer l'espacement à gauche des lignes débordante de la liste.
Remarques
- Positionnement des marqueurs internes ou externes : La propriété list-style-position contrôle la position du marqueur (bullet, numéro,...) par rapport
à l'élément <li>. Deux valeurs principales sont disponibles : inside (le marqueur est inclus dans le contenu de
l'élément) et outside (le marqueur est placé en dehors, par défaut).
- Valeur par défaut : outside : Par défaut, la valeur de list-style-position est outside. Cela signifie que le marqueur est placé en dehors du
bloc <li> et aligné avec les autres lignes. Ceci est particulièrement utile pour les listes à puces ou numérotées où un alignement
précis est recherché.
- Interaction avec l'alignement du texte : Avec list-style-position: inside, le marqueur devient une partie du contenu et suit les règles de justification
ou d'alignement du texte. Cela peut provoquer des effets inattendus, notamment si le texte est centré ou justifié.
- Accessibilité et lecture des listes : Utiliser list-style-position: inside peut améliorer l'accessibilité dans certains cas, car les lecteurs d'écran
interprètent parfois mieux les marqueurs inclus dans le flux du texte. Cependant, cela peut aussi entraîner des difficultés visuelles lorsque les marqueurs ne sont pas bien
alignés.
- Problème avec les longues lignes de texte : Avec list-style-position: inside, si une ligne de texte dépasse, elle peut commencer sous le marqueur, ce
qui peut nuire à la lisibilité. Cela contraste avec outside, où le texte débordant s'alignera correctement sous les autres lignes.
- Compatibilité entre navigateurs : La propriété est largement supportée par tous les navigateurs modernes
(Google Chrome, Firefox,
Safari, Edge,...). Cependant, des tests sont recommandés pour des projets plus anciens ou des navigateurs peu
courants afin d'éviter des comportements inattendus.
- Combinaison avec d'autres propriétés : list-style-position est souvent utilisée avec list-style-type (pour définir le style des marqueurs) et
list-style-image (pour personnaliser le marqueur). Ces propriétés permettent de créer des listes visuellement attrayantes et personnalisées tout en gardant un contrôle
précis sur leur positionnement.
- Effet sur les listes imbriquées : Pour les listes imbriquées, la valeur outside permet de conserver un alignement clair des marqueurs entre chaque
niveau d'imbrication. En revanche, inside peut rendre ces niveaux moins évidents visuellement, surtout si les marges ne sont pas ajustées.
Dernière mise à jour : Dimanche, le 20 décembre 2015