Как убрать отступ на втором уровне нумерации?

У меня проблема с удалением отступа на элементах 2.1, 2.2, 2.3 и т. д., Вероятно, отступ третьего уровня нумерации будет перемещен влево после решения этой проблемы.

Мой код:

ol {
  counter-reset: item
}
li {
  display: block
}
li:before {
  content: counters(item, ".") " ";
  counter-increment: item
}

<ol>
  <li>one</li>
  <li>two
    <ol>
      <li>two.one</li>
      <li>two.two</li>
      <li>two.three</li>
    </ol>
  </li>
  <li>three
    <ol>
      <li>three.one</li>
      <li>three.two
        <ol>
          <li>three.two.one</li>
          <li>three.two.two</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>four</li>
</ol>

Много способов перепробовал, но ничего не получается. У кого-то есть идеи, как это решить, пожалуйста?

Вам нужен отступ третьего уровня или нет?

— 08.06.2018 08:39

Конечно, теперь я понял, что отступ третьего уровня нумерации тоже будет обязательным. Прекрасное решение, спасибо вам огромное! :) :)

— 08.06.2018 08:42

html css html-lists

08.06.2018 08:37

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Ответы 3

Добавьте эти стили

ol ol {
  padding: 0;
}
ol ol ol {
  padding: 20px;
}

ol {
  counter-reset: item
}
ol ol {
  padding: 0;
}
ol ol ol {
  padding: 20px;
}
li {
  display: block
}
li:before {
  content: counters(item, ".") " ";
  counter-increment: item
}

<ol>
  <li>one</li>
  <li>two
    <ol>
      <li>two.one</li>
      <li>two.two</li>
      <li>two.three</li>
    </ol>
  </li>
  <li>three
    <ol>
      <li>three.one</li>
      <li>three.two
        <ol>
          <li>three.two.one</li>
          <li>three.two.two</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>four</li>
</ol>

08.06.2018 08:39

Предполагая, что вы не можете изменить разметку, вы можете применить свои стили к родительскому элементу списка и нацелить второй уровень нумерации с помощью дочернего комбинатора (>):

.list-parent > ol > li > ol {
  padding-left: 0;
}
.list-parent ol {
  counter-reset: item
}
.list-parent li {
  display: block
}
.list-parent li:before {
  content: counters(item, ".") " ";
  counter-increment: item
}

<div class = "list-parent">
  <ol>
    <li>one</li>
    <li>two
      <ol>
        <li>two.one</li>
        <li>two.two</li>
        <li>two.three</li>
      </ol>
    </li>
    <li>three
      <ol>
        <li>three.one</li>
        <li>three.two
          <ol>
            <li>three.two.one</li>
            <li>three.two.two</li>
          </ol>
        </li>
      </ol>
    </li>
    <li>four</li>
  </ol>
</div>

Это был бы лучший подход с точки зрения ремонтопригодности, поскольку применение глобальных стилей к каждому списку <ol> на вашем веб-сайте рано или поздно приведет только к нежелательному поведению.

08.06.2018 08:46

Вот простое решение:
(См. Комментарии в коде)

ol {
  counter-reset: item;
  padding-left: 0;   /* Remove the padding of all ol elements */
}
ol ol ol {
  padding-left: 1em; /* Set the padding of third level ol elements */
}
li {
  display: block;
}
li:before {
  content: counters(item, ".") " ";
  counter-increment: item;
}

<ol>
  <li>one</li>
  <li>two
    <ol>
      <li>two.one</li>
      <li>two.two</li>
      <li>two.three</li>
    </ol>
  </li>
  <li>three
    <ol>
      <li>three.one</li>
      <li>three.two
        <ol>
          <li>three.two.one</li>
          <li>three.two.two</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>four</li>
</ol>

Надеюсь, поможет.

08.06.2018 09:12