CSS list-style-position — де стоїть маркер списку
Властивість list-style-position визначає, де буде розміщуватися мітка, всередині списку, чи поза його межами.
Для цієї властивості існує два значення:
list-style-position можна використовувати в будь-якому елементі списку. Елемент списку - це будь-який елемент, у якого display встановлено як list-item або inline-list-item, який є нащадком елементів <ol> i <ul>.
Загальний опис
автор: NagarD
- Нотатка
-
Між браузерами існує різниця щодо поведінки, коли блоковий елемент розміщений на спочатку в елементі списку, оголошеному як
автор: 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; }Значення у дії
HTML
<div class="field-items">
<div class="field-item even">
<div id="playground-result">
<ul id="playground-property" style="list-style-position: inside;">
<li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut ipsam animi reiciendis harum, obcaecati earum aliquam laudantium dolore fugiat enim! Sint ipsam illo eius rerum! Nulla, porro aperiam blanditiis obcaecati cupiditate unde officia saepe nisi hic dolore quia eos, commodi, illo placeat facere. Repellendus doloribus molestias impedit dolore nesciunt nam?</li>
</ul>
</div>
<div class="grid-x grid-margin-x">
<p>Вибери потрібне значення для властивості <b>list-style-position</b>:</p>
<div id="playground-value" class="cell medium-12 large-6">
<label><input type="radio" name="value" value="inside" checked="">inside</label>
<label><input type="radio" name="value" value="outside">outside</label>
</div>
<div id="playground-code" class="cell medium-12 large-6">
<pre>ul {
list-style-position: <span id="playground-code-value">inside</span>;
}<div class="preloader"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></pre>
</div>
</div>
</div>
</div>CSS
#playground-code{
background: lightgrey;
font-weight: 700;
font-size: 18px;
}
#playground-value{
margin: 15px;
font-size: 18px;
}
p{
text-decoration: underline;
}
li{
font-size: 17px;
}JS
var radios = document.querySelectorAll('#playground-value input[type="radio"]');
function changeHandler(event) {
document.getElementById('playground-property').style.listStylePosition = this.value;document.getElementById('playground-code-value').innerText = this.value;
}
Array.prototype.forEach.call(radios, function (radio) {
radio.addEventListener('change', changeHandler);
});
//# sourceURL=pen.jsТой самий список двічі. З outside маркер стоїть поза пунктом (і поза його фоном), а другий рядок вирівняний під текстом; з inside маркер усередині — і продовження заходить під нього.
HTML
<div class="col">
<p class="label">list-style-position: outside</p>
<ul class="out">
<li>Короткий пункт</li>
<li>Довгий пункт, який точно не вміститься в один рядок і перенесеться далі</li>
</ul>
</div>
<div class="col">
<p class="label">list-style-position: inside</p>
<ul class="in">
<li>Короткий пункт</li>
<li>Довгий пункт, який точно не вміститься в один рядок і перенесеться далі</li>
</ul>
</div>CSS
body {
display: flex;
gap: 24px;
flex-wrap: wrap;
font-family: sans-serif;
font-size: 15px;
line-height: 1.4;
padding: 12px;
}
.col {
width: 240px;
}
.label {
font-family: monospace;
font-size: 12px;
color: #666;
margin: 0 0 8px;
}
li {
background: #eef6ff;
margin-bottom: 8px;
}
.out {
list-style-position: outside;
}
.in {
list-style-position: inside;
}Приклад використання
HTML
<ul class="out">
<p>Для списку задана властивість <code>list-style-position: outside;</code></p>
<li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur obcaecati earum vel facere deleniti ex!</li>
<li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur obcaecati earum vel facere deleniti ex!</li>
<li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur obcaecati earum vel facere deleniti ex!</li>
</ul>
<ul class="in">
<p>Для списку задана властивість <code>list-style-position: inside;</code></p>
<li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur obcaecati earum vel facere deleniti ex!</li>
<li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur obcaecati earum vel facere deleniti ex!</li>
<li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur obcaecati earum vel facere deleniti ex!</li>
</ul>CSS
ul {
font-size: 1.25em;
}
ul.out {
list-style-position: outside;
}
ul.in {
list-style-position: inside;
}
code {
padding: 4px;
display: inline-block;
margin-bottom: 16px;
}
p{
font-weight: 700;
}Коментарі
Коментарів ще немає — будьте першим!