Question

我想要实现的是：

1 text
1.1 text
2 text
2.1 text
    2.1.1 text
    2.1.2 text
3. text
3.1 text
    3.1.1 text
    3.1.2 text
    3.1.3 text

父级（即1、2、3）没有缩进。如上代码所示，它的第一个子项也就是1.1、2.1、3.1。

我当前的代码：

<style>
    ol {
        list-style-type: none;
        counter-reset: item;
        margin: 0;
        padding: 0;
    }

li {
    display: table;
    counter-increment: item;
    margin-bottom: 0.6em;
}

li:before {
    font-weight: bold;
    content: counters(item, ".") ". ";
    display: table-cell;
    padding-right: 0.6em;
}

li li:before {
    content: counters(item, ".") " ";
}

<body>
    <ol>
        <li>
            Text
        </li>
        <li>
            Text
            <ol>
                <li>
                    text
                </li>
            </ol>
        </li>
        <li>Text
            <ol>
                <li>text</li>
                <li>text</li>
            </ol>
        </li>
        <li>text
            <ol>
                <li>text
                </li>
                <li>text
                </li>
                <li>text
                    <ol>
                        <li>text
                        </li>
                        <li>text
                        </li>
                        <li>text
                        </li>
                    </ol>
                </li>
                <li>text
                    <ol>
                        <li>text
                        </li>
                        <li>text
                        </li>
                        <li>text
                        </li>
                    </ol>
                </li>
                <li>text
                </li>
            </ol>
        </li>
    </ol>
</body>

结果： output

如何删除缩进（例如4.1、4.2、4.3、4.4）并使其与父级（1、2、3、4）具有相同的水平缩进？

Answer 1

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol > li {
  display: table;
  counter-increment: item;
}

ol > li:before {
  content: counters(item, ".") ". ";
  display: inline-block;
  padding-right: 0;    
}
ol > li > ol > li:before {
  padding-right: 0.6em;
  display: table-cell;
}


li ol > li {
  margin: 0;
}

li ol > li:before {
  content: counters(item, ".") " ";
}

<ol>
  <li>text
    <ol>
      <li>text</li>
    </ol>
  </li>
  
  <li>text
    <ol>
      <li>text
        <ol>
          <li>text</li>
          <li>text</li>
        </ol>
      </li>
    </ol>
  </li>
<li>text
    <ol>
      <li>text
        <ol>
          <li>text</li>
          <li>text</li>
          <li>text</li>
        </ol>
      </li>
    </ol>
  </li>

我认为这就是您所期望的。

Answer 2

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

li {
  counter-increment: item;
  margin-bottom: 0.6em;
}

li:before {
  font-weight: bold;
  content: counters(item, ".") ". ";
  padding-right: 0.6em;
}

li li:before {
  content: counters(item, ".") " ";
}

body>ol>li>ol ol {
  margin-left: 3em;
}

<body>
  <ol>
    <li>
      Text
    </li>
    <li>
      Text
      <ol>
        <li>
          text
        </li>
      </ol>
    </li>
    <li>Text
      <ol>
        <li>text</li>
        <li>text</li>
      </ol>
    </li>
    <li>text
      <ol>
        <li>text
        </li>
        <li>text
        </li>
        <li>text
          <ol>
            <li>text
            </li>
            <li>text
            </li>
            <li>text
            </li>
          </ol>
        </li>
        <li>text
          <ol>
            <li>text
            </li>
            <li>text
            </li>
            <li>text
            </li>
          </ol>
        </li>
        <li>text
        </li>
      </ol>
    </li>
  </ol>
</body>

如何设置有序列表的第一个和第二个孩子具有相同的缩进？

2 个答案: