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

Question

我需要实现一个嵌套的有序结构化 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>

Answer 1

只需将此样式添加到您的样式部分即可。

.sub-num-list{
  list-style-type: none;
}

它将删除数字的重叠

Answer 2

您在使用 :before 和列表 counter CSS 属性时犯了错误。此外，您可能迷失在 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>

您可以在有关 list counter formatting and nested different list-style-type counters

的类似问题中找到更多信息

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

HTML CSS Issues in implementing nested ordering which includes numbers, alphabets and roman numbers

html

css

html-lists

css-counter