简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
不同样式的嵌套列表
P粉998920744
P粉998920744 2024-03-31 16:20:05
0
2
279

HTML和列表对我来说是一个新的层次，我正在尝试在HTML中创建一个带有相关编号的嵌套列表，并在第三级中使用字母编号类型。

body {
  padding-left: 100px;
}

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

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

ol>li:before {
    content: counters(item, ".",decimal-leading-zero) ". ";
    display: table-cell;
    padding-right: 0.6em;
}

li ol>li {
    margin: 0;
}

li ol>li:before {
    content: counters(item, ".",decimal-leading-zero) " ";
}
<ol>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li></li>
  <li></li>
  <li>
    <ol>
      <li></li>
      <li>
        <ol>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

以上是我的代码。结果如下：

01.
  01.01
  01.02
  01.03
02.
03.
04.
  04.01
  04.02
      04.02.01
      04.02.02
      04.02.03

但我想要的是：

01.
  01.01
  01.02
  01.03
02.
03.
04.
  04.01
  04.02
        a.  ←
        b.  ←
        c.  ←
  04.03

有人知道如何解决这个问题吗？

我已经尝试了数字解决方案并搜索了网络。这就是我得出上述解决方案的方法。但是我找不到第三级的小写字母类型的样式解决方案。

P粉998920744
P粉998920744

全部回复(2)
P粉033429162
P粉0334291622024-04-01 13:38:08 2 楼

最简单的方法是将您的第三级列表项更改回列表项，隐藏内容并使用小写字母的列表样式：

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

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

ol>li:before {
  content: counters(item, ".", decimal-leading-zero) ". ";
  display: table-cell;
  padding-right: 0.6em;
}

li ol>li {
  margin: 0;
}

li ol>li:before {
  content: counters(item, ".", decimal-leading-zero) " ";
}

/* 下面的样式添加，其他内容不变 */

ol ol ol {
  list-style-type: lower-alpha;
}

ol ol ol li {
  display:list-item;
  margin-left: 1em;
}
ol ol ol li:before {
  content: none;
}
<ol>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li></li>
  <li></li>
  <li>
    <ol>
      <li></li>
      <li>
        <ol>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </li>
    </ol>
  </li>
</ol>
点赞 +0
添加回复
P粉488464731
P粉4884647312024-04-01 13:27:34 1 楼

请检查下面的工作代码：

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

    ol>li {
        display: block;
        counter-increment: item;
        margin-bottom: 0.6em;
        padding-left: 15px;
    }

    ol>li:before {
        content: counters(item, ".",decimal-leading-zero) ". ";
        display: table-cell;
        padding-right: 0.6em;
    }

    li ol>li {
        margin: 0;
    }

    li ol>li:before {
        content: counters(item, ".",decimal-leading-zero) " ";
    }
    
    ol>li>ol>li>ol
    {
    counter-reset: listStyle;
    }
    
        ol>li>ol>li>ol li{
  margin-left: 1em;
  counter-increment: listStyle;
}
        
        ol>li>ol>li>ol li::before {
  margin-right: 1em;
  content: counter(listStyle, lower-alpha);
}
<html>

<head>

</head>

<body>

</body>
<ol>
    <li>
      <ol>
        <li></li>
        <li></li>
        <li></li>
      </ol>
    </li>
    <li></li>
    <li></li>
    <li>
      <ol>
        <li></li>
        <li>
          <ol>
            <li></li>
            <li></li>
            <li></li>
          </ol>
        </li>
      </ol>
    </li>
  </ol>
</body>

</html>
点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！