Как сделать список в списке?

Question

[Алексей]

Добрый день, как сделать список как на картинке ? Заранее спасибо.

Comments

[Ankhena]

Вложить список в список и использоваться свойства css counter-reset и counter-increment
https://webref.ru/css/counter-reset

[Алексей]

Ankhena, спасибо за ответ. Подскажите пожалуйста в чем моя проблема ?

<ol class="entry__list">
 <li class="entry__numericlist"><a href="#1">1</a></li>
 <li class="entry__numericlist"><a href="#2">2</a>
<ol class="entry__list list-numeric">
<li class="entry__numericlist"><a href="#2.1">2.1</a></li>
<li class="entry__numericlist"><a href="#2.2">2.2</a></li>
 	<li class="entry__numericlist"><a href="#2.3">2.3</a></li>
</ol>
</li>
<li class="entry__numericlist"><a href="#businesses">3</a>
<ol class="entry__list list-numeric">
 	<li class="entry__numericlist"><a href="#3.1">3.1</a></li>
 	<li class="entry__numericlist"><a href="#3.2">3.2</a></li>
 	<li class="entry__numericlist"><a href="#smb">3.3s</a></li>
</ol>
</li>
 <li class="entry__numericlist"><a href="#industries">4</a></li>
 <li class="entry__numericlist"><a href="#5">5</a></li>
 <li class="entry__numericlist"><a href="#6">6</a></li>
 <li class="entry__numericlist"><a href="#7">7</a></li>
</ol>

.entry-table__content ol {
  list-style: none;
  counter-reset: item;
}

.entry-table__content li::before {
  counter-increment: item;
  content: counters(item, ".") ". ";
}

[Ankhena]

Алексей,
По моей ссылке выше есть вообще готовый пример аналогичный вашей задаче.
Остается только изменить селекторы на ваши классы.

в чем моя проблема ?

В том, что вы потеряли половину кода из того примера.

[Алексей]

Ankhena, спасибо разобрался !

Answer 1

[Вадим]

Как сделать список в списке?

Сделать список в списке.

А циферки можно с помощью css счётчиков

https://stackoverflow.com/questions/2729927/number...

Comments

[Алексей]

Вадим спасибо за ответ. Не можете подсказать почему такая ерунда получается у меня добавляется цифры ко всем спискам ?

<ol class="entry__list">
 <li class="entry__numericlist"><a href="#1">1</a></li>
 <li class="entry__numericlist"><a href="#2">2</a>
<ol class="entry__list list-numeric">
<li class="entry__numericlist"><a href="#2.1">2.1</a></li>
<li class="entry__numericlist"><a href="#2.2">2.2</a></li>
 	<li class="entry__numericlist"><a href="#2.3">2.3</a></li>
</ol>
</li>
<li class="entry__numericlist"><a href="#businesses">3</a>
<ol class="entry__list list-numeric">
 	<li class="entry__numericlist"><a href="#3.1">3.1</a></li>
 	<li class="entry__numericlist"><a href="#3.2">3.2</a></li>
 	<li class="entry__numericlist"><a href="#smb">3.3s</a></li>
</ol>
</li>
 <li class="entry__numericlist"><a href="#industries">4</a></li>
 <li class="entry__numericlist"><a href="#5">5</a></li>
 <li class="entry__numericlist"><a href="#6">6</a></li>
 <li class="entry__numericlist"><a href="#7">7</a></li>
</ol>

.entry-table__content ol {
  list-style: none;
  counter-reset: item;
}

.entry-table__content li::before {
  counter-increment: item;
  content: counters(item, ".") ". ";
}

[Вадим]

Алексей, Сравните с ответом на стэк оверлфлоу. Там есть рабочий css онли вариант.

[Алексей]

Вадим, спасибо разобрался.