HTML Тег <ul>
Приклад
Невпорядкований список HTML:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Спробуйте самі »
Більше прикладів "Спробуйте самі" далі.
Визначення та використання
Тег <ul> визначає невпорядкований (маркований) список.
Використовуйте тег <ul> разом із тегом <li> для створення невпорядкованих списків.
Порада: Використовуйте CSS для стилізації списків.
Порада: Для впорядкованих списків використовуйте тег <ol>.
Підтримка браузерами
| Елемент | |||||
|---|---|---|---|---|---|
| <ul> | Так | Так | Так | Так | Так |
Глобальні атрибути
Тег <ul> також підтримує Глобальні атрибути в HTML.
Атрибути подій
Тег <ul> також підтримує Атрибути подій в HTML.
Більше прикладів
Приклад
Встановити різні типи стилів списку (за допомогою CSS):
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Спробуйте самі »
Приклад
Розширювати та зменшувати висоту рядків у списках (за допомогою CSS):
<ul style="line-height:180%">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="line-height:80%">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Спробуйте самі »
Приклад
Створення списку всередині списку (вкладеного списку):
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Спробуйте самі »
Приклад
Створіть більш складний вкладений список:
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
Спробуйте самі »
Пов’язані сторінки
HTML підручник: HTML Списки
HTML DOM довідник: Об’єкт Ul
CSS підручник: Стилізація списків
CSS налаштування за замовчуванням
Більшість браузерів будуть відображати елемент <ul> з наступними значеннями за замовчуванням:
Приклад
ul {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
Спробуйте самі »
