CSS - posición de estilo de lista

Descripción

La propiedad list-style-position afecta la ubicación de un marcador en relación con el contenido del elemento de la lista.

Valores posibles

No Señor.	Valor y descripción
1	none N / A
2	inside Si el texto pasa a una segunda línea, el texto se ajustará debajo del marcador. También aparecerá con sangría donde el texto habría comenzado si la lista tuviera un valor de outside.
3	outside Si el texto pasa a una segunda línea, el texto se alineará con el inicio de la primera línea (a la derecha de la viñeta).

Se aplica a

Todos los elementos con visualización de list-item.

Sintaxis DOM

object.style.listStylePosition = "inside";

Ejemplo

Aquí está el ejemplo:

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

Esto producirá el siguiente resultado:

↰ Previous page