Proprietà CSS list-style-position
La proprietà CSS list-style-position posiziona il marcatore della lista dentro o fuori il box dell'elemento. Valori, esempi e utilizzo.
La proprietà list-style-position controlla se il marcatore di un elemento di lista (il pallino o il numero) si trova dentro o fuori il box dell'elemento. È un dettaglio piccolo ma visibile: determina se il testo che va a capo in un elemento di lista lungo si allinea sotto il marcatore o sotto la prima riga di testo.
Questa pagina illustra entrambi i valori, come la scelta influisce sull'indentazione e sull'andare a capo del testo, come la proprietà si relaziona con la shorthand list-style, e quando conviene usare ciascun valore.
Come si applica
list-style-position funziona su qualsiasi elemento il cui display è list-item. Per impostazione predefinita ciò significa gli elementi <li>. Poiché la proprietà è ereditata, di solito la si imposta una volta sull'elemento lista genitore — <ul> o <ol> — e tutti gli elementi la acquisiscono automaticamente.
| Valore iniziale | outside |
|---|---|
| Si applica a | Elementi di lista. |
| Ereditata | Sì. |
| Animabile | No. |
| Versione | CSS1 |
| Sintassi DOM | object.style.listStylePosition = "inside"; |
Sintassi
list-style-position: inside | outside | initial | inherit;Esempi
Esempio con il valore "inside"
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.inside {
list-style-position: inside;
}
li {
border: 1px solid #666;
padding: 5px;
}
</style>
</head>
<body>
<h2>List-style-position property example</h2>
<p>Here the list-style is positioned "inside".</p>
<ul class="inside">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
</html>Risultato
![Proprietà CSS list-style-position](https://api.w3docs.com/uploads/media/default/0001/03/f9df27bcea2db32f3bb0f4290142c7eea8e2ff47.png "CSS list-style-position inside example" =420x)
Con inside, il marcatore diventa parte del contenuto dell'elemento. Si trova all'interno del box, quindi il bordo di ciascun <li> racchiude anche il marcatore, e qualsiasi testo che va a capo su una seconda riga si allinea sotto il marcatore anziché sotto la prima riga di testo.
Esempio con il valore "outside"
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.outside {
list-style-position: outside;
}
li {
border: 1px solid #666;
padding: 5px;
margin-bottom: 15px;
}
</style>
</head>
<body>
<h2>List-style-position property example</h2>
<p>Here the list-style is positioned "outside".</p>
<ul class="outside">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
</html>Con outside (il valore predefinito), il marcatore viene spostato nell'area a sinistra del box. Il bordo ora abbraccia solo il testo, e le righe che vanno a capo si allineano con la prima riga di testo invece che con il marcatore — l'aspetto classico della maggior parte delle liste sul web.
Scegliere un valore
outsideè la scelta convenzionale. Il testo che va a capo rimane ben allineato, il che facilita la lettura per elementi lunghi. Poiché il marcatore sporge fuori dal box, è necessario lasciare spazio con ilpadding-leftdella lista (i browser aggiungono un padding sinistro predefinito proprio per questo motivo).insideè utile quando non si può permettere un margine sinistro extra — ad esempio in una lista molto compatta, in una card, o in un layout dove ciascun<li>ha il proprio sfondo o bordo visibile che dovrebbe includere anche il marcatore.
Un errore comune è rimuovere il padding sinistro della lista e poi chiedersi perché i marcatori outside vengano tagliati. Se si imposta padding-left: 0, il marcatore potrebbe essere spinto fuori dall'area visibile; in tal caso si può passare a inside, oppure ripristinare un padding sufficiente (vedi padding).
Relazione con la shorthand list-style
list-style-position è uno dei tre componenti della shorthand list-style, insieme a list-style-type e list-style-image. Queste due dichiarazioni sono equivalenti:
/* Longhand */
ul {
list-style-type: square;
list-style-position: inside;
}
/* Shorthand — type then position */
ul {
list-style: square inside;
}Valori
| Valore | Descrizione | Prova |
|---|---|---|
| outside | Posiziona il box del marcatore fuori dal box del blocco principale. È il valore predefinito di questa proprietà. | Prova » |
| inside | Imposta il box del marcatore come primo box inline nel box del blocco principale. | Prova » |
| initial | Imposta la proprietà al suo valore predefinito. | Prova » |
| inherit | Eredita la proprietà dall'elemento genitore. |