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

【问题标题】：How to set first and second child of ordered list to have the same indentation?如何将有序列表的第一个和第二个孩子设置为具有相同的缩进？
【发布时间】：2018-09-09 22:36:56
【问题描述】：

我想要实现的是：

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) 具有相同级别的缩进？

【问题讨论】：

你能添加你的html吗？
问题已更新

标签： html css

【解决方案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>

我认为这是你所期望的。

【讨论】：

【解决方案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>

【讨论】：

我们可以把
1. 标签内吗？我的前辈告诉我，我不允许这样做，因为解析时会出错。顺便说一句，我正在使用 dompdf 将 html 转换为 pdf，似乎 dompdf 不允许这样做
它看起来对我有效（顺便说一句，我刚刚复制了你的 html）。
确保您正在通过验证器运行您的 html 并且您正在使用 HTML5 解析器：$dompdf->set_option('isHtml5ParserEnabled', true);