CSS
Elenca stili

Sintassi

• list-style: list-style-type | lista-stile-posizione | list-style-image | iniziale | ereditare;

Parametri

Osservazioni

Tipo di pallottola o numerazione

Specifico per i tag <li> all'interno di un elenco non ordinato ( <ul> ):

list-style: disc;                /* A filled circle (default) */
list-style: circle;              /* A hollow circle */
list-style: square;              /* A filled square */
list-style: '-';                 /* any string */

Specifico per i tag <li> all'interno di un elenco ordinato ( <ol> ):

list-style: decimal;             /* Decimal numbers beginning with 1 (default) */
list-style: decimal-leading-zero;/* Decimal numbers padded by initial zeros (01, 02, 03, … 10) */
list-style: lower-roman;         /* Lowercase roman numerals (i., ii., iii., iv., ...) */
list-style: upper-roman;         /* Uppercase roman numerals (I., II., III., IV., ...) */
list-style-type: lower-greek;    /* Lowercase roman letters (α., β., γ., δ., ...) */
list-style-type: lower-alpha;    /* Lowercase letters (a., b., c., d., ...) */
list-style-type: lower-latin;    /* Lowercase letters (a., b., c., d., ...) */
list-style-type: upper-alpha;    /* Uppercase letters (A., B., C., D., ...) */
list-style-type: upper-latin;    /* Uppercase letters (A., B., C., D., ...) */

Non specifico:

list-style: none;                /* No visible list marker */
list-style: inherit;             /* Inherits from parent */

Posizione di proiettile

Una lista è composta da elementi <li> all'interno di un elemento contenente ( <ul> o <ol> ). Sia gli elementi dell'elenco che il contenitore possono avere margini e paddings che influenzano la posizione esatta del contenuto dell'elemento dell'elenco nel documento. I valori predefiniti per il margine e il riempimento potrebbero essere diversi per ciascun browser. Per ottenere lo stesso cross-browser di layout, questi devono essere impostati in modo specifico.

Ogni elemento della lista riceve una "casella di marcatura", che contiene il segnalino punto. Questa casella può essere posizionata all'interno o all'esterno della casella di elenco.

list-style-position: inside;

posiziona il punto elenco all'interno dell'elemento <li> , spingendo il contenuto a destra secondo necessità.

list-style-position: outside;

posiziona il punto a sinistra dell'elemento <li> . Se non c'è abbastanza spazio nel padding dell'elemento contenitore, la casella del marker si estenderà a sinistra anche se cadrebbe dalla pagina.

Mostrando il risultato del posizionamento inside ed outside : jsfiddle

Rimozione di elenchi puntati / numeri

A volte, una lista non deve semplicemente mostrare punti elenco o numeri. In tal caso, ricorda di specificare il margine e il riempimento.

<ul>
    <li>first item</li>
    <li>second item</li>
</ul>

CSS

ul {
    list-style-type: none;
}
li {
    margin: 0;
    padding: 0;
}