Accueil    CSS    Propriété List-style-position
 



style css list-style-position  Style CSS list-style-position

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété list-style-position indique comment se fait l'affichage du marqueur utilisé par la liste par rapport aux éléments composant la liste.

Il faut imaginer la liste comme l'association de deux blocs adjacents : le premier bloc pour le marqueur, le second pour l'élément de la liste.
Par défaut le marqueur est extérieur aux éléments de la liste (valeur "outside") :
- le marqueur occupe un espace défini qui lui est propre (le premier bloc)
- le texte est affiché à côté du marqueur et se fait sans tenir compte de celui-ci (second bloc)

Si la propriété est valorisée à "inside" alors le marqueur et le texte sont intégrés dans le même bloc (le second bloc), un espace est présent (correspondant au premier bloc vide) et l'affichage du texte se fait en intégrant la place prise par le marqueur dans le bloc : les retours à la ligne se font alors sous le marqueur.



Propriétés pour le style list-style-position :




Propriété Définition Valeurs CSS
list-style-position Détermine la position du texte des éléments de la liste par rapport au marqueur inside
outside
inherit
CSS 1


Exemple d'utilisation du style css list-style-position :





Disposition par défaut de la liste avec la propriété list-style-position : outside

<ul style="list-style-type:disc; list-style-position:outside; width:200px;">
   <li style="border:dotted 1px black; padding:3px;">
      élément 1 de la liste <br /> avec retour à la ligne</li>
   <li style="border:dotted 1px black; padding:3px;">
      élément 2 de la liste <br /> avec retour à la ligne</li>
   <li style="border:dotted 1px black; padding:3px;">
      élément 3 de la liste <br /> avec retour à la ligne</li>
   <li style="border:dotted 1px black; padding:3px;">
      élément 4 de la liste <br /> avec retour à la ligne</li>
</ul>


Disposition de la liste avec la propriété list-style-position : inside


<ul style="list-style-type:disc; list-style-position:inside; width:200px;">
   <li style="border:dotted 1px black; padding:3px;">
      élément 1 de la liste <br /> avec retour à la ligne</li>
   <li style="border:dotted 1px black; padding:3px;">
      élément 2 de la liste <br /> avec retour à la ligne</li>
   <li style="border:dotted 1px black; padding:3px;">
      élément 3 de la liste <br /> avec retour à la ligne</li>
   <li style="border:dotted 1px black; padding:3px;">
      élément 4 de la liste <br /> avec retour à la ligne</li>
</ul>


Disposition par défaut de la liste avec la propriété list-style-position : outside

  • élément 1 de la liste
    avec retour à la ligne
  • élément 2 de la liste
    avec retour à la ligne
  • élément 3 de la liste
    avec retour à la ligne
  • élément 4 de la liste
    avec retour à la ligne



Disposition de la liste avec la propriété list-style-position : inside

  • élément 1 de la liste
    avec retour à la ligne
  • élément 2 de la liste
    avec retour à la ligne
  • élément 3 de la liste
    avec retour à la ligne
  • élément 4 de la liste
    avec retour à la ligne