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

❮ Назад Далее ❯

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">Главная</a></li>
   <li><a href="#news">Новости</a></li>
   <li><a href="#contact">Контакты</a></li>
   <li><a href="#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 Справочник тегов.

❮ Назад Далее ❯

HTML Учебник

HTML Формы

HTML Графика

HTML Медиа

HTML APIы

HTML Примеры

HTML Справочники

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