ul li 实现层级列表显示-阿里云开发者社区

ul li 实现层级列表显示

2018-06-08 1562

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 实现效果如下：实现要求具体如下：1.标题有序号上图标记12.标题下面的子集标题要有一定的缩进，且子集标题也有一定的序号，上图标记 23.如果子集标题内容过长，换行的时，开始的位置不能超过对应序号的位置，如上图标记3dom: ...

实现效果如下：

实现要求具体如下：

1.标题有序号上图标记1

2.标题下面的子集标题要有一定的缩进，且子集标题也有一定的序号，上图标记 2

3.如果子集标题内容过长，换行的时，开始的位置不能超过对应序号的位置，如上图标记3

dom:

<div class="rule-contents">
        <ol class="rule-contents-items">
          <li>
            <div>
              <span>第一个标题</span>
              <ol>
                <li>
                  第一个标题的第一条内容
                </li>
                <li>
                  第二个标题的第二个内容第二个标题的第二个内容第二个标题的第二个内容第二个标题的第二个内容第二个标题的第二个内容
                </li>
              </ol>
            </div>
          </li>
          <li>
            <span>第二个标题</span>
            <ol>
              <li>第二个标题的第一条内容</li>
              <li>
                第二个标题的第二条内容
              </li>
            </ol>
          </li>
          <li>
            <span>第三个标题</span>
            <ol>
              <li>第三个标题的第一个内容，第三个标题的第一个内容第三个标题的第一个内容第三个标题的第一个内容第三个标题的第一个内容第三个标题的第一个内容</li>
              <li>第三个标题的第二条内容</li>
              <li>第三个标题的第三条内容</li>
              <li>第三个标题的第四条内容，第三个标题的第一个内容第三个标题的第一个内容第三个标题的第一个内容第三个标题的第一个内容第三个标题的第一个内容第三个标题的第一个内容</li>
            </ol>
          </li>
        </ol>
  </div>

css:

 .rule-contents {
          >ol>li {
            margin-bottom: 10px;
            list-style: outside; // 序号在内容外
            list-style-type: decimal; // 排序标准为 数字
            font-weight: 600;
            span {
              font-size: 16px;
            }
            ol {
              padding-left: 20px;
              li {
                list-style-type: lower-latin; // 排序标准为 字母
                font-weight: 400;
              }
            }
            
          }
        .rule-contents-items {
          padding-left: 10px;
        }
      }