HTML Невпорядковані списки
HTML тег <ul> визначає невпорядкований (маркований) список.
Невпорядкований HTML список
Невпорядкований список починається з тегу <ul>. Кожен елемент списку починається з тегу <li>.
Елементи списку за замовчуванням будуть позначені маркерами (маленькі чорні кола):
Невпорядкований HTML список - Виберіть маркер елемента списку
CSS властивість list-style-type використовується для визначення стилю маркера елемента списку. Він може мати одне з наступних значень:
| Значення | Опис |
|---|---|
| disc | Встановлює маркер елемента списку на маркер (за замовчуванням) |
| circle | Встановлює маркер елемента списку в коло |
| square | Встановлює маркер елемента списку в квадрат |
| none | Елементи списку не будуть позначені |
Приклад - Disc
<ul style="list-style-type:disc;">
<li>Кава</li>
<li>Чай</li>
<li>Молоко</li>
</ul>
Спробуйте самі »
Приклад - Circle
<ul style="list-style-type:circle;">
<li>Кава</li>
<li>Чай</li>
<li>Молоко</li>
</ul>
Спробуйте самі »
Приклад - Square
<ul style="list-style-type:square;">
<li>Кава</li>
<li>Чай</li>
<li>Молоко</li>
</ul>
Спробуйте самі »
Приклад - None
<ul style="list-style-type:none;">
<li>Кава</li>
<li>Чай</li>
<li>Молоко</li>
</ul>
Спробуйте самі »
Вкладені HTML списки
Списки можуть бути вкладеними (список всередині списку):
Приклад
<ul>
<li>Кава</li>
<li>Чай
<ul>
<li>Чорний чай</li>
<li>Зелений чай</li>
</ul>
</li>
<li>Молоко</li>
</ul>
Спробуйте самі »
Примітка: Елемент списку (<li>) може містити новий список та інші елементи HTML, такі як зображення та посилання тощо.
Горизонтальний список за допомогою CSS
Списки HTML можна стилювати різними способами за допомогою CSS.
Одним з популярних способів є стилізація списку по горизонталі, створення меню навігації:
Приклад
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
Спробуйте самі »
Примітка: Ви можете дізнатись набагато більше про CSS в CSS Підручнику на нашому сайті W3Schools українською.
Підсумок
- Використовуйте HTML елемент
<ul>, щоб визначити невпорядкований список - Використовуйте CSS властивість
list-style-type, щоб визначати маркер елемента списку - Використовуйте HTML елемент
<li>, щоб визначити елемент списку - Списки можна вкладати
- Елементи списку можуть містити інші елементи HTML
- Використовуйте CSS властивість
float:leftдля горизонтального відображення списку
HTML Теги списку
| Тег | Опис |
|---|---|
| <ul> | Визначає невпорядкований список |
| <ol> | Визначає впорядкований список |
| <li> | Визначає елемент списку |
| <dl> | Визначає список описів |
| <dt> | Визначає термін у списку описів |
| <dd> | Описує термін у списку описів |
Для отримання повного списку всіх доступних HTML тегів відвідайте HTML Довідник тегів на нашому сайті W3Schools українською.
