ul li 实现层级列表显示

时间：2018-06-08 15:55:37 阅读：1389 评论：0 收藏：0 [点我收藏+]

标签：www. web class href 不能 bubuko lan info ems

实现效果如下：

技术分享图片

实现要求具体如下：

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;
        }
      }