html - 如何设置有序列表的第一个和第二个 child 具有相同的缩进？-6ren

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

转载作者：行者123 更新时间：2023-11-28 14:46:28

25

4

我想要实现的是:

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 不会有任何缩进。它的第一个 child 也一样，即 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)同级缩进？

最佳答案

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>

我想这是你所期望的。

关于html - 如何设置有序列表的第一个和第二个 child 具有相同的缩进？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52244606/

25

4

0

文章推荐： ios - 如何将 UISwitch 添加到 UITableView 的部分？

文章推荐： javascript - 该按钮只能工作一次

文章推荐： swift - 地理围栏功能 iOS 11

文章推荐： javascript - 从客户端到数据库保存和检索时间

mongodb 元组比较(有序)
就类似于这个问题:mongodb query multiple pairs using $in 我想用 (first, last) >= ('John', 'Smith') 找到前 10 个全名。使用
cocoa - 有序 NSDictionary
如何保留向 NSDictionary 添加对象的方式？我意识到 NSDictionary 中的值没有特定的顺序，但就我而言，我需要保留使用 setValue:forKey: 添加的顺序，例如一个数组
assembly - 有序/无序比较是什么意思？
看看上证所运营商 CMPORDPS - ordered compare packed singles CMPUNORDPS - unordered compare packed singles 有序和
java - powermock 有序
我使用 PowerMock 来模拟静态方法。我需要验证静态和非静态方法调用的顺序。可以使用 PowerMock 来做吗？ UPD 我使用 powermockito 扩展来模拟静态方法，因此使用 pow
scala - 合并两个流(有序)以获得最终排序的流
例如，如何合并两个已排序的整数流？我认为这是非常基本的，但只是发现它根本不是微不足道的。下面的不是尾递归的，当流很大时它会堆栈溢出。 def merge(as: Stream[Int], bs: St
c - 用于在二叉树中查找(有序)节点后继的代码中的段错误
我试图在二叉树中查找/打印每个节点的中序后继，但编译器给我的结果是段错误。这是结构:- struct node { int x; struct node *left; str
sql - 使整个 block 有序
我有一个查询看起来像 SELECT a, b, c, d FROM tab ORDER BY a ASC, b ASC 我的结果集看起来像 +-----------------
php - 有序 SQL 时间戳提取
首先，我试过搜索这个主题但一无所获(似乎找不到合适的关键词)，所以如果这是重复的，请告知。我一直在尝试从我的数据库中获取一些 time_stamp 并将它们按时间间隔排序。例如，我运行一个查询，如
c++ - 有序 QVector 中的二进制搜索
这个问题在这里已经有了答案: How do I get the index of an iterator of an std::vector? (9 个回答) 关闭 6 年前。我已经订购了 QVe
java - 有序 Hibernate 列表违反唯一约束
我有以下实体，如果我尝试通过 removeTask 方法从 TaskList 中删除 Task，则会出现异常。 @Entity public class TaskList extends Generi
c - 将字符串中的每个字母(有序)合并为一个新字符串
所以，我对 C 编程还是很陌生。有3个长度相同的字符串。 str1="abc", str2="def", str3="ghi". 新字符串中的输出将类似于“adgbehcfi”。 #include
MySQL:分组/有序/左连接查询非常慢
我的查询有一个问题，它花费的时间太长(仅仅这个简单的查询就超过了两秒)。乍一看，这似乎是一个索引问题，所有连接的字段都已编入索引，但我找不到其他我可能需要编入索引以加快速度的内容。一旦我将我需要的字
java - 有序 map 实现
我正在寻找一个 Map 实现，它按照键值对的添加顺序迭代它们。例如 Map orderedMap = // instantiation omitted for obvious reasons :) o
database - 分层、有序、键值存储？
我正在寻找具有以下功能的数据库系统: 分层(多维)键每个维度的键排序因此，如果我的 key 类似于 App > User > Item，我可以运行如下查询:“该用户的下一项是什么？”或者“这个应用
c++ - 使无序初始化 statc 有序
以下类使用 CRTP 尝试将类型添加到具有 Schwarz 计数器以确保初始化顺序的 std::vector。根据 3.6.2/2 成员 h_ 具有无序初始化。我将如何更改它以确保它已订购初始化？我希
C++有序(稳定)优先级队列
我正在实现一个玩具调度程序，它读取进程规范(例如到达时间、总运行时间)的输入文件，然后根据随机 io/cpu 突发调度进程。文件格式 Arrival time, total CPU time, CP
Python - 有序 header HTTP 请求
我目前正在使用 python 2.7 requests 库，并且不支持有序 header 。我可以为 post 和 get 放置有序数据(如有序字典)，但根本不支持标题。甚至在 python 3 中也
java - java中是否有并发&自过期&有序 HashMap
我正在使用来自 google guava 的 ConcurrentHashMap(通过 MapMaker)，但该实现未排序。google guava 中有 ConcurrentSkipListMap，
java - 有序(自然插入顺序)和线程安全的 Java Map
我有一个旧应用程序，其中使用 ConcurrentHashMap。现在我们知道并发HasMap 是无序的，但是需要读取最初插入的对象。我已经在生产中使用了一段时间的代码，因此我正在寻找快速替代方案来替
c# - 保持 .NET 依赖注入(inject)有序
最近我开始使用 .NET Core 2.1 开发一个新项目，我决定使用 SOLID 原则并创建一个漂亮的项目结构。这是一个 Web API 项目。一切正常我使用了很多依赖注入(inject)，大部分

首页

博学

6Ren·AI

商城

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