CSS
Style list

Składnia

• list-style: list-style-type | pozycja-styl-pozycja | obraz w stylu listy | inicjał | dziedziczyć;

Parametry

Uwagi

Rodzaj punktora lub numeracji

Specyficzne dla <li> na liście nieuporządkowanej ( <ul> ):

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

Specyficzne dla <li> na liście uporządkowanej ( <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., ...) */

Niespecyficzne:

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

Pozycja pocisku

Lista składa się z <li> elementów wewnątrz elementu zawierającego ( <ul> lub <ol> ). Zarówno elementy listy, jak i kontener mogą mieć marginesy i wypełnienia, które wpływają na dokładne położenie zawartości elementu listy w dokumencie. Domyślne wartości marginesu i wypełnienia mogą być różne dla każdej przeglądarki. Aby uzyskać ten sam układ w różnych przeglądarkach, należy je ustawić specjalnie.

Każdy element listy otrzymuje „pole znacznika”, które zawiera znacznik pocisku. To pole może być umieszczone wewnątrz lub na zewnątrz pola elementu listy.

list-style-position: inside;

umieszcza punktor w elemencie <li> , w razie potrzeby przesuwając treść w prawo.

list-style-position: outside;

umieszcza punktor na lewo od elementu <li> . Jeśli w wypełnieniu elementu zawierającego nie ma wystarczającej ilości miejsca, pole znacznika rozciąga się w lewo, nawet jeśli spadnie ze strony.

Pokazuje wynik pozycjonowania inside i na outside : jsfiddle

Usuwanie punktorów / liczb

Czasami lista nie powinna zawierać żadnych punktów ani liczb. W takim przypadku pamiętaj o określeniu marginesu i wypełnienia.

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

CSS

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