CSS: posizione in stile elenco

Descrizione

La proprietà list-style-position influenza il posizionamento di un marcatore in relazione al contenuto dell'elemento dell'elenco.

Possibili valori

Sr.No. Valore e descrizione
1

none

N / A
2

inside

Se il testo va su una seconda riga, il testo andrà a capo sotto il marcatore. Apparirà anche rientrato nel punto in cui il testo sarebbe iniziato se l'elenco avesse un valore esterno.
3

outside

Se il testo va su una seconda riga, il testo sarà allineato con l'inizio della prima riga (a destra del punto elenco).

Si applica a

Tutti gli elementi con una visualizzazione di list-item.

Sintassi DOM

object.style.listStylePosition = "inside";

Esempio

Ecco l'esempio:

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

Questo produrrà il seguente risultato: