时间戳

首页 > 解决方案 > 实现嵌套排序时的 HTML CSS 问题，包括数字、字母和罗马数字

html - 实现嵌套排序时的 HTML CSS 问题，包括数字、字母和罗马数字

问题描述

我需要实现一个非常相似的嵌套有序结构化 html 页面。大部分部分都已完成，但我在编号排序时卡在了 1 个位置。请建议。以下是所需的结构和我的代码。

1.Main Line 111111111 
    1.1 Sub Line 111111111 
        a.aaaaaaaaaaa
        b.bbbbbbbbbbb

2.Main Line 22222222
    2.1 Sub Line 111111111 
        a.aaaaaaaaaaa
        b.bbbbbbbbbbb   
    2.2 Sub Line 22222222 
        a.aaaaaaaaaaa 
            i.moreeeeee
            ii.moreeeeee
        b.bbbbbbbbbbb 
            i.moreeeeee
            ii.moreeeeee

但是得到一些重叠的数字，如图所示： 在此处输入图像描述 请建议我在哪里做错了？

在我的代码中：

ol {
  counter-reset: item;
}

ol>li {
  counter-increment: item;
}

.sub-num-list>li:before {
  content: counters(item, ".") " ";
  margin-left: -20px;
}

.sub-num-list>ol>li:before {
  content: counters(item, ".") " ";
  margin-left: -20px;
}

.sub-albhabatical-list>li {
  list-style-type: lower-alpha;
  margin-left: 20px;
}

.sub-roman-list>li {
  list-style-type: lower-roman;
  margin-left: 20px;
}
<div class="layout__wrapper">

  <ol>

    <li>Main Line 111111111
      <ol class="sub-num-list">
        <li>Sub Line 111111111
          <ol class="sub-albhabatical-list">
            <li>aaaaaaaaaaa</li>
            <li>bbbbbbbbbbb</li>
          </ol>
        </li>

      </ol>
    </li>

    <li>Main Line 22222222
      <ol class="sub-num-list">
        <li>Sub Line 111111111
          <ol class="sub-albhabatical-list">
            <li>aaaaaaaaaaa</li>
            <li>bbbbbbbbbbb</li>
          </ol>
        </li>
        <li>Sub Line 22222222
          <ol class="sub-albhabatical-list">
            <li>aaaaaaaaaaa
              <ol class="sub-roman-list">
                <li>moreeeeee</li>
                <li>moreeeeee</li>
              </ol>
            </li>
            <li>bbbbbbbbbbb
              <ol class="sub-roman-list">
                <li>moreeeeee</li>
                <li>moreeeeee</li>
              </ol>
            </li>
          </ol>
        </li>
        <li>Sub Line 111111111
          <ol class="sub-albhabatical-list">
            <li>aaaaaaaaaaa</li>
            <li>bbbbbbbbbbb</li>
          </ol>
        </li>
      </ol>
    </li>
  </ol>
</div>

标签： htmlcsshtml-listscss-counter

解决方案

您在使用您的:before和列表counterCSS 属性时是错误的。此外，您可能迷失在 CSS 选择器中，最终得到了不想要的效果。

我为你修好了，希望这就是你要找的

li {
  display: block
}

.main-num-list, .sub-num-list {
  counter-reset: item
}

.main-num-list>li:before,
.sub-num-list>li:before {
  content: counters(item, ".") " ";
  counter-increment: item
}

.sub-albhabatical-list {
  counter-reset: letter;
}

.sub-albhabatical-list > li:before {
  content: counter(letter, lower-alpha) ". ";
  counter-increment: letter;
}

.sub-roman-list {
  counter-reset: roman;
}

.sub-roman-list > li:before {
  content: counter(letter, lower-roman) ". ";
  counter-increment: roman;
}
<div class="layout__wrapper">

  <ol class="main-num-list">

    <li>Main Line 111111111
      <ol class="sub-num-list">
        <li>Sub Line 111111111
          <ol class="sub-albhabatical-list">
            <li>aaaaaaaaaaa</li>
            <li>bbbbbbbbbbb</li>
          </ol>
        </li>

      </ol>
    </li>

    <li>Main Line 22222222
      <ol class="sub-num-list">
        <li>Sub Line 111111111
          <ol class="sub-albhabatical-list">
            <li>aaaaaaaaaaa</li>
            <li>bbbbbbbbbbb</li>
          </ol>
        </li>
        <li>Sub Line 22222222
          <ol class="sub-albhabatical-list">
            <li>aaaaaaaaaaa
              <ol class="sub-roman-list">
                <li>moreeeeee</li>
                <li>moreeeeee</li>
              </ol>
            </li>
            <li>bbbbbbbbbbb
              <ol class="sub-roman-list">
                <li>moreeeeee</li>
                <li>moreeeeee</li>
              </ol>
            </li>
          </ol>
        </li>
        <li>Sub Line 111111111
          <ol class="sub-albhabatical-list">
            <li>aaaaaaaaaaa</li>
            <li>bbbbbbbbbbb</li>
          </ol>
        </li>
      </ol>
    </li>
  </ol>
</div>

您可以在有关列表计数器格式和嵌套不同列表样式类型计数器的类似问题中找到更多信息

推荐阅读