ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP КАК СДЕЛАТЬ W3.CSS JQUERY XML JAVA БОЛЬШЕ 🔍 ◑ КНИГИ СПРАВОЧНИКИ УПРАЖНЕНИЯ
HTML5. Уроки для начинающих

En Ua

HTML Неупорядоченные списки

❮ Prev Next ❯

HTML тег <ul> определяет неупорядоченный (маркированный) список.

Неупорядоченный HTML список

Неупорядоченный список начинается с тега <ul>. Каждый элемент списка начинается с тега <li>.

Элементы списка по умолчанию будут обозначены маркерами (маленькие черные кружки):

Пример

<ul>
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ul>

Попробуйте сами »

Неупорядоченный 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: #333333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111111;
}
</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 Учебнике на нашем сайте.

Резюме

  • Используйте HTML элемент <ul>, чтобы определить неупорядоченный список
  • Используйте CSS свойство list-style-type, чтобы определить маркер элемента списка
  • Используйте HTML элемент <li>, чтобы определить элемент списка
  • Списки можно влаживать
  • Элементы списка могут содержать другие элементы HTML
  • Используйте CSS свойство float:left для горизонтального отображения списка

HTML Теги списка

Тег Описание
<ul> Определяет неупорядоченный список
<ol> Определяет упорядоченный список
<li> Определяет элемент списка
<dl> Определяет список описаний
<dt> Определяет термин в списке описаний
<dd> Описывает термин в списке описаний

Для ознакомления с полным списком всех доступных HTML тегов посетите HTML Справочник тегов на нашем сайте W3Schools на русском.

❮ Prev Next ❯