0

Как сделать список формата.

  • 1.Главный пункт (жирный текст.)
  • 1.1 Подпункт
  • 1.2 Подпункт
  • 1.3 Подпункт

  • 2.Главный пункт (жирный текст.)
  • 2.1 Подпункт
  • 2.2 Подпункт
  • 2.3 Подпункт

Я когда через простые абзацы сделал, то столкнулся с проблемой если текста много, то он переносится под пункт меню, а 1.1 1.2 - должен быть типо как маркер и всегда быть справа, под ним не должно быть текста при переносе.

1
  • @Sevastopol' jsfiddle.net/5d1xc4y9/1 Вот я немного сделал, + li разобрался, добавив просто флекс, но с главным пунктом меню жирным текстом, чето неполучается.
    – faradei
    22 янв 2021 в 16:55

1 ответ 1

1

Всю нумерацию можно собрать из CSS-counter() и добавить к ним символ

body {
  counter-reset: bubu;
}

.title {
  font-weight: bold;
  counter-reset: sub-bubu;
}

.title::before {
  counter-increment: bubu;
  content: "• " counter(bubu) ". ";
}

.ul li:not(.title)::before {  
  counter-increment: sub-bubu;  
  content: "• " counter(bubu) "." counter(sub-bubu);
}

.ul li {
  display: flex;
}

.ul li::before {
  white-space: nowrap;
  padding-right: 5px;
}
<ul class="ul">
  <li class="title">Главный пункт</li>
  <li>Подпункт</li>
  <li>Подпункт</li>
  <li>Подпункт</li>
</ul>

<ul class="ul">
  <li class="title">Главный пункт</li>
  <li>Подпункт</li>
  <li>Подпункт</li>
  <li>Подпункт test test test test test test test test test test test test test test test test test test test test test test</li>
</ul>

1
  • спасибо, почитаю подробнее про каунтеры, у меня по сути получилось самому сделать, но как то кривовато все было.
    – faradei
    22 янв 2021 в 18:16

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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