Właściwość CSSInterakcja i inne
list-style-position
Ustala, czy znacznik listy stoi na zewnątrz czy wewnątrz bloku elementu.
- Wartość domyślna
outside- Dziedziczona
- Tak
- Animowalna
- nie
- Dotyczy
- elementy listy (display: list-item)
- JavaScript
element.style.listStylePosition = "inside"
Przykład
#CSS
.steps {
list-style-position: inside;
}
.steps li {
padding: 8px 12px;
border-radius: 8px;
background: #18181b;
}HTML przykładu
<ol style="list-style-position: inside; margin: 0; padding: 0; display: grid; gap: 6px;">
<li style="padding: 8px 12px; border-radius: 8px; background: #18181b;">Załóż konto</li>
<li style="padding: 8px 12px; border-radius: 8px; background: #18181b;">Wybierz pierwszy kurs</li>
</ol>Podgląd
Definicja i zastosowanie
#Właściwość list-style-position decyduje, gdzie rysowany jest znacznik elementu listy. Przy outside (domyślnie) znacznik wisi na lewo od bloku tekstu, a kolejne linie wyrównują się do pierwszej linii tekstu.
Przy inside znacznik staje się częścią pierwszej linii tekstu, a łamiące się linie zaczynają się pod znacznikiem, od krawędzi bloku.
Różnicę najlepiej widać przy dłuższych, zawijających się pozycjach i przy elementach listy z tłem lub obramowaniem.
Składnia
#Składnia
list-style-position: outside | inside;Wartości
#Wartości w praktyce
#outside
Znacznik poza tłem elementu, tekst wyrównany w kolumnie.
.demo { list-style-position: outside; }inside
Znacznik w pierwszej linii, wewnątrz tła.
.demo { list-style-position: inside; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- W listach z tłem na elementach
insidezwykle wygląda lepiej, bo numer nie wystaje poza kafelek. - Dla długiego tekstu
outsidejest czytelniejsze, bo linie tworzą równą kolumnę.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.