css властивість list-style-position
Властивість list-style-position визначає, де буде розміщуватися мітка, всередині списку, чи поза його межами.
Для цієї властивості існує два значення:
list-style-position можна використовувати в будь-якому елементі списку. Елемент списку - це будь-який елемент, у якого display встановлено як list-item або inline-list-item, який є нащадком елементів <ol> i <ul>.
- Нотатка
-
Між браузерами існує різниця щодо поведінки, коли блоковий елемент розміщений на спочатку в елементі списку, оголошеному як
автор: Svitlanalist-style-position: inside. Chrome і Safari поміщають цей елемент у той самий рядок, що й маркер, тоді як Firefox, Internet Explorer та Opera поміщають його в наступний рядок.
Синтаксис
list-style-position: inside|outside|initial|inherit;Властивість list-style-position може отримувати 4 значень:
-
inside -
Мітка є частиною текстового блоку і відображається в середині елемента.
автор: Svitlana -
outside -
Текст вирівнюється по лівому краю, а мітка буде за межами блоку. Без задання.
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивостей від свого батьківського елемента
автор: Svitlana
| Значення без задання: | outside |
|---|---|
| Наслідує: | Так |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.listStylePosition="inside" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 3.5 | 12 | 4 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
З outside (типово) маркер висить ліворуч від тексту і другий рядок починається під першим; з inside маркер стоїть у потоці, й текст обгортає його.
HTML
<ul class="outside">
<li>outside: маркер за межами блока тексту, другий рядок під першим.</li>
</ul>
<ul class="inside">
<li>inside: маркер у потоці тексту, другий рядок починається під маркером.</li>
</ul>CSS
ul {
width: 240px;
border: 1px dashed #ccc;
}
.outside { list-style-position: outside; }
.inside { list-style-position: inside; }Значення у дії
Приклад використання
Коментарі
Коментарів ще немає — будьте першим!