Как убрать отступ со второго уровня нумерации? - PullRequest
Новая
       8

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

0 голосов
/ 08 июня 2018

У меня проблема с удалением отступа для элементов 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>

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

Ответы [ 3 ]

0 голосов
/ 08 июня 2018

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

.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> на вашем сайте приведет к нежелательному поведению раньше илипозже.

0 голосов
/ 08 июня 2018

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

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>

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

0 голосов
/ 08 июня 2018

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

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>
...