CSS - position de style de liste

La description

La propriété list-style-position affecte le placement d'un marqueur par rapport au contenu de l'élément de liste.

Valeurs possibles

N ° Sr. Valeur et description
1

none

N / A
2

inside

Si le texte va sur une deuxième ligne, le texte sera enveloppé sous le marqueur. Il apparaîtra également en retrait à l'endroit où le texte aurait commencé si la liste avait une valeur extérieure.
3

outside

Si le texte va sur une deuxième ligne, le texte sera aligné avec le début de la première ligne (à droite de la puce).

S'applique à

Tous les éléments avec un affichage d'élément de liste.

Syntaxe DOM

object.style.listStylePosition = "inside";

Exemple

Voici l'exemple -

<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style-type:circle; list-stlye-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ul style = "list-style-type:square;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style-type:decimal;list-stlye-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-alpha;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
   
</html>

Cela produira le résultat suivant -