时间戳

首页 > 解决方案 > 如何将有序列表的第一个和第二个孩子设置为具有相同的缩进？

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

问题描述

我想要实现的是：

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>

结果： 输出

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

标签： htmlcss

解决方案

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>

我想这是你所期望的。

推荐阅读