Li ul css: Стилизация списков — Изучение веб-разработки

— элемент «Неупорядоченный список» — HTML

HTML-элемент <ul> используется для неупорядоченного списка — в частности для маркированного списка.

Этот элемент включает глобальные атрибуты.

compact Устарело

Атрибут логического значения (bool) говорит о том, что список будет представлен в более компактном стиле. Интерпретация этого атрибута зависит от user agent и не работает со всеми браузерами.

Предупреждение: Не используйте этот атрибут, ибо он устаревший и больше не используется, используйте CSS. Для схожего эффекта с

compact, подойдёт свойство CSS line-height с значением 80%.

type Устарело

Этот атрибут добавляет маркеры (bullets) в список. Значения установлены под HTML3.2 и переходными на HTML 4.0/4.01 являются:

• Элемент <ul> используется для группировки непронумерованных элементов данных, и их последовательность в списке не нужна. Что характерно, непорядочные списки используют маркеры, которые могут быть разных форм (в форме точки, круга или прямоугольной формы). Стиль задаётся не в HTML, а со связанным с ним CSS, используя свойство list-style-type (en-US) .
• Элементы <ul> и <ol> могут быть вложены на любом уровне. Более того, вложенные списки могут чередоваться между <ol> и <ul> без ограничений.
• Элементы <ol> и <ul> используются для списков. Различие лишь в том, что в элементе <ol> порядок имеет значение. Согласно эмпирической закономерности (или правилу большого пальца), чтобы определить, какую маркировку использовать, попробуйте поменять порядок элементов в списке. Если суть списка меняется, то тогда подойдёт элемент <ol>, в противном случае используйте <ul>.

Простой список

<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>

Результат HTML кода выше:

Вложенный список

<ul>
  <li>first item</li>
  <li>second item
  <!-- Закрывающий тег </li> пишем не здесь! -->
    <ul>
      <li>second item first subitem</li>
      <li>second item second subitem
     <!-- То же самое для второго вложенного неупорядоченного списка! -->
        <ul>
          <li>second item second subitem first sub-subitem</li>
          <li>second item second subitem second sub-subitem</li>
          <li>second item second subitem third sub-subitem</li>
        </ul>
      </li> <!-- Закрывающий тег </li>, который
закрывает третий неупорядоченный список -->
      <li>second item third subitem</li>
    </ul>
  <!-- Вот закрывающий тег </li> -->
  </li>
  <li>third item</li>
</ul>

Результат HTML кода выше:

Упорядоченный список внутри неупорядоченного списка

<ul>
  <li>first item</li>
  <li>second item
  <!-- Закрывающий тег </li> пишем не здесь! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
   <!-- Вот закрывающий тег </li> -->
  </li>
  <li>third item</li>
</ul>

Результат HTML кода выше:

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

• Остальные списковые HTML-элементы: <ol>, <li>, <menu> и устаревший <dir> (en-US);
• CSS-свойства, которые могут быть полезны для стилизации <ul> элементов:
  • свойство list-style (en-US), полезное для выбора способа отображения маркеров,
  • CSS счётчики, для более сложных вложенных списков,
  • свойство line-height, для замены убранного свойства compact,
  • свойство margin, для контроля отступа в списке.

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on 000Z»>4 мар. 2023 г. by MDN contributors.

— HTML | MDN

HTML-элемент <li> используется для создания элементов списка. Он также должен находиться в родительском элементе: упорядоченном списке (<ol>), неупорядоченном списке (<ul>), или меню (<menu>). В меню и неупорядоченных списках, элементы списка обычно отображаются с маркерами в виде круга. В упорядоченных списках, они обычно отображаются с маркерами в виде возрастающего счётчика слева, например числа или буквы.

Категории контента	Нет.
Допустимое содержимое	Потоковый контент
Пропуск тегов	Закрывающий тег может быть опущен, если за элементом непосредственно следует другой элемент <li> или если в родительском элементе нет больше содержимого.
Допустимые родители	Элементы <ul>, <ol>, или <menu>. Хотя и не соответствует использованию, устаревший <dir> (en-US) тоже может быть родительским элементом.
Допустимые ARIA-роли	menuitem (en-US), menuitemcheckbox (en-US), menuitemradio (en-US), option (en-US), presentation (en-US), radio (en-US), separator (en-US), tab (en-US), treeitem (en-US)
DOM-интерфейс	HTMLLIElement (en-US)

Этот элемент включает глобальные атрибуты.

value

Этот числовой атрибут указывает на текущий порядковый номер элемента в списке, заданного с помощью элемента <ol>. Единственное разрешённое значение этого атрибута — число, даже если список отображается с римскими цифрами или буквами. Элементы списка, которые идут после элемента с таким атрибутом, нумеруются с заданного значения. Атрибут value не имеет значения для неупорядоченных списков (

<ul>) или для меню (<menu>).

Примечание: Этот атрибут был убран в HTML4, но заново добавлен в HTML5. Примечание: Предыдущие до Gecko 9.0, отрицательные значения неправильно конвертировались в 0. Начиная с Gecko 9.0 все числовые значения воспринимаются правильно.

type Устарело

Этот символьный атрибут указывает на тип нумерации:

Для более подробных примеров смотрите страницы <ol> и <ul>.

Упорядоченный список

<ol>
  <li>Первый элемент</li>
  <li>Второй элемент</li>
  <li>Третий элемент</li>
</ol>

Упорядоченный список с пользовательским значением

<ol type="I">
  <li value="3">Третий элемент</li>
  <li>Четвёртый элемент</li>
  <li>Пятый элемент</li>
</ol>

<ul>
  <li>Первый элемент</li>
  <li>Второй элемент</li>
  <li>Третий элемент</li>
</ul>

 тип-стиля-списка: диск|круг|квадрат|десятичный|нижний-римский|верхний-римский|
нижний греческий|нижний латинский|верхний латинский|нижний альфа|верхний альфа|нет|
наследовать;