如何从第二个编号级别删除缩进？

Question

我有问题要删除元素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>

我尝试了很多方法，但没有什么不对。有人有想法，请问如何解决？

Answer 1

添加这些样式

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

假设您无法更改标记，您可以将样式应用于列表的父元素，并使用子组合子（>）定位第二个编号级别：

.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>列表只会迟早导致不必要的行为。

Answer 3

这是一个简单的解决方案：
（参见代码中的注释）

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

希望它有所帮助。