2

Нужен нумерованный список следующего вида:

R001. текст
R002. текст
..
R123. текст

Требования такие:

  1. Маркер элемента списка состоит из строки и порядкового номера.
  2. Строка не меняется, но её нужно задать явно.
  3. Порядковый номер дополнен нулями до нужной разрядности, её тоже нужно задать явно.

Как реализовать это на CSS?

2 ответа 2

6

Вариант с нулями

ol.requirement{
  padding-left: 0;
}
ol.requirement li {
  counter-increment: req;
  list-style-type: none;
}

ol.requirement li:before {
  content: "R0" counter(req, decimal-leading-zero) ". ";
}

ol.requirement li:nth-child(n+100):before {
  content: "R" counter(req, decimal-leading-zero) ". ";
}
<ol class="requirement">
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
	<li>text</li>
</ol>

3
  • Какой хитрый трюк.
    – Nick Volynkin
    Commented 28 нояб. 2017 в 7:40
  • А что можно сделать с отступом?
    – Nick Volynkin
    Commented 28 нояб. 2017 в 7:46
  • @Nick Volynkin какой отступ необходимо убрать?
    – soledar10
    Commented 28 нояб. 2017 в 8:47
4

Не смог только настроить количество нулей и в новом списке слишком большой отступ.

ol.requirement li {
  counter-increment: req;
  list-style-type: none;
}

ol.requirement li:before {
  content: "R" counter(req, decimal-leading-zero) ". ";
}
Специальный список:

<ol class="requirement">
  <li>text</li>
  <li>text</li>
</ol>

Для сравнения, обычный список:

<ol>
  <li>text</li>
  <li>text</li>
</ol>

3
  • Отступы у них одинаковые, просто списки свои псевдообозначения (числа, буллеты) располагают слева, игнорируя левый паддинг. В общем, поменяйте padding-left у нужного вам списка.
    – DaemonHK
    Commented 28 нояб. 2017 в 9:02
  • @DaemonHK я почти впервые что-то делаю с css, не понимаю как устроены расстояния. Наверное, задам новый вопрос про это.
    – Nick Volynkin
    Commented 28 нояб. 2017 в 12:31
  • У списков по умолчанию есть внешние отступы (margin) сверху и снизу и внутренний (padding) слева, который и нужно уменьшить для .requirement
    – DaemonHK
    Commented 28 нояб. 2017 в 13:28

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.