list-style-position
Podsumowanie
list-style-position określa pozycję znacznika listy w elemencie listy.
- Wartość początkowa:
outside - Stosowana do: elementów z 'display: list-item'
- Dziedziczona: tak
- Procenty: niedostępne
- Media:
visual - Wartość wyliczona: jako określone
Składnia
list-style-position: inside | outside | inherit
Wartości
outside- Znacznik jest umieszczany poza elementem listy.
inside- Znacznik jest umieszczany wewnątrz elementu listy. Jest on pierwszym blokiem inline i zawartość elementu go opływa.
Przykłady
HTML
<ul class="one"> List 1
<li>List Item 1-1</li>
<li>List Item 1-2</li>
<li>List Item 1-3</li>
<li>List Item 1-4</li>
</ul>
<ul class="two"> List 2
<li>List Item 2-1</li>
<li>List Item 2-2</li>
<li>List Item 2-3</li>
<li>List Item 2-4</li>
</ul>
<ul class="three"> List 3
<li>List Item 3-1</li>
<li>List Item 3-2</li>
<li>List Item 3-3</li>
<li>List Item 3-4</li>
</ul>CSS
.one {
list-style:square inside;
}
.two {
list-style-position: outside;
list-style-type: circle;
}
.three {
list-style-image: url("https://mdn.mozillademos.org/files/11979/starsolid.gif");
list-style-position: inherit;
}