css властивість list-style-position

Властивість list-style-position визначає, де буде розміщуватися мітка, всередині списку, чи поза його межами.

Для цієї властивості існує два значення:

list-style-position можна використовувати в будь-якому елементі списку. Елемент списку - це будь-який елемент, у якого display встановлено як list-item або inline-list-item, який є нащадком елементів <ol> i <ul>.

правити

Нотатка

Між браузерами існує різниця щодо поведінки, коли блоковий елемент розміщений на спочатку в елементі списку, оголошеному як list-style-position: inside. Chrome і Safari поміщають цей елемент у той самий рядок, що й маркер, тоді як Firefox, Internet Explorer та Opera поміщають його в наступний рядок.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

list-style-position: inside|outside|initial|inherit;

Властивість list-style-position може отримувати 4 значень:

inside

Мітка є частиною текстового блоку і відображається в середині елемента.

автор: Svitlana

правити

outside

Текст вирівнюється по лівому краю, а мітка буде за межами блоку. Без задання.

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивостей від свого батьківського елемента

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
list-style-position	1.0	1.0	1.0	7.0	12.0	4.0

Підтримка: мобільні переглядачі

Переглядач
list-style-position	1.0	1.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<ul class="outside">
    <li>outside: маркер за межами блока тексту, другий рядок під першим.</li>
</ul>
<ul class="inside">
    <li>inside: маркер у потоці тексту, другий рядок починається під маркером.</li>
</ul>

ul {
    width: 240px;
    border: 1px dashed #ccc;
}

.outside { list-style-position: outside; }
.inside  { list-style-position: inside; }