Как в списке вывести римские цифры?

Для создания римской нумерации списка к элементу <ol> добавляется атрибут type со значением I (римские цифры в верхнем регистре — I, II, III) или значением i (римские цифры в нижнем регистре — i, ii, iii). В примере 1 показано создание списка с римскими цифрами.

Пример 1. Использование атрибута type

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Римские цифры</title>
 </head>
 <body>
  <ol type="I">
   <li>тысячелетие до н. э.</li>
   <li>тысячелетие до н. э.</li>
   <li>тысячелетие до н. э.</li>
  </ol>
 </body>
</html>

Результат данного примера показан на рис. 1. Обратите внимание, что нумерация выравнивается по точке.

Вид нумерованного списка

Рис. 1. Вид нумерованного списка

Также можно управлять типом нумерации через стили. Для этого к селектору ol или li надо добавить свойство list-style-type со значением upper-roman или lower-roman. В примере 2 показано создание списка с римскими цифрами в нижнем регистре.

Пример 2. Использование свойства list-style-type

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Римские цифры</title>
  <style>
   li {
    list-style-type: lower-roman; /* Цифры i, ii, iii,… */
   }
  </style>
 </head>
 <body>
  <ol type="I">
   <li>тысячелетие до н. э.</li>
   <li>тысячелетие до н. э.</li>
   <li>тысячелетие до н. э.</li>
   <li>тысячелетие до н. э.</li>
  </ol>
 </body>
</html>

Результат данного примера показан на рис. 2.

Вид нумерованного списка

Рис. 2. Вид нумерованного списка

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 19.09.2018
Редакторы: Влад Мержевич