Question

我有一个列表，我需要创建（相当奇怪的）结构：

1.1. 
    1.1.1. 
    1.1.2. 
    1.1.3. 
2. 
    1.1.4. 
    1.1.5. 
    1.1.6. 
3. 
4.

我的工作结构是：

＆＃13;

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

＆＃13;

我可以解决它而不使用列表元素（手动布局）。但我想知道是否可以使用标准<li>元素来为每个项目的标签设置特定的字符串值。

我尝试使用<li value=""></li>语法，但它似乎只适用于整数。

指出这与正常列表之间的主要区别：

顶级列表使用两种不同的标签＆＃34;类型＆＃34; （＆＃34; 1.1＆＃34;第一个，＆＃34; 2＆＃34;第二个）
第二个顶级菜单项中的子项从第一个列表项中的子项开始。
只有两个列表＆＃34;级别＆＃34;，但子菜单项有3个数字标签。

对于不遵循数字模式的结构中的列表标签，是否有内置的解决方案？

Answer 1

您可以使用counters。

示例：

＆＃13;

 <ol>
  <li>one</li>
  <li>two
  <ol>
   <li>two.one</li>
   <li>two.two</li>
   <li>two.three</li>
  </ol>
     </li>
  <li>three 
  <ol>
   <li>three.one</li>
   <li>three.two</li>
    <ol>
     <li>three.two.one</li>
     <li>three.two.two</li>
    </ol>
   </ol>
     </li> 
  <li>four</li>
</ol>

＆＃13;

{{1}}

＆＃13;

Answer 2

这样的事情对你有用吗？

ol li ol {
  margin-left: 2.5em;
}

ol li ol li:before {
  content: "1.1.";
  margin-left: -2.5em;
}

<ol>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li>
    <ol start="4">
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li></li>
  <li></li>
</ol>

为每个标签构建包含自定义文本的HTML列表

2 个答案: