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 на русском.
