如何实现ul li子层级动态左缩进10px？现有代码仅支持一级缩进

我来帮你搞定这个嵌套列表的缩进问题！你现在遇到的情况是只有第一层子元素有缩进，更深的层级没法自动增加，这是因为当前CSS只给直接子级设置了缩进，没有处理多层嵌套的情况。

问题回顾 #

你在代码里用了多层<ul>和<li>元素，test1作为TEster的子元素已经实现了左侧10px的缩进，但更深层级的Tester2没法再增加10px的缩进，需要实现动态的层级缩进效果。

当前代码示例 #

CSS代码

.documents_061e9f12 .container_061e9f12 { max-width: 700px; margin: 0 auto; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2), 0 25px 50px 0 rgba(0, 0, 0, .1) } .documents_061e9f12 .titleContainer_061e9f12 { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between } .documents_061e9f12 .titleContainer_061e9f12 .title_061e9f12 { font-size: 24px; font-weight: 750 } .documents_061e9f12 .titleContainer_061e9f12 .buttonContainer_061e9f12 { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column } .documents_061e9f12 .titleContainer_061e9f12 .buttonContainer_061e9f12 .upperButtons_061e9f12 { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-pack: end; justify-content: flex-end; margin-bottom: 15px } .documents_061e9f12 .titleContainer_061e9f12 .buttonContainer_061e9f12 .upperButtons_061e9f12 .smallIcon_061e9f12 { color: #000; margin-left: 10px } .documents_061e9f12 .titleContainer_061e9f12 .buttonContainer_061e9f12 .lowerButtons_061e9f12 { display: -ms-flexbox; display: flex } .documents_061e9f12 .titleContainer_061e9f12 .buttonContainer_061e9f12 .lowerButtons_061e9f12 .uploadBtn_061e9f12 { padding: 6px 20px; background-color: #578772; color: #fff } .documents_061e9f12 .titleContainer_061e9f12 .buttonContainer_061e9f12 .lowerButtons_061e9f12 .uploadIcon_061e9f12 { background-color: #376b56; color: #fff; width: 30px; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center } .documents_061e9f12 ul.datacontainer_061e9f12 { list-style: none; padding-left: 5px } .documents_061e9f12 ul.datacontainer_061e9f12 li:first-of-type { border-top: 1px solid #dadada } .documents_061e9f12 ul.datacontainer_061e9f12 li { border-bottom: 1px solid #dadada; padding: 1px 0; cursor: pointer } .documents_061e9f12 ul.datacontainer_061e9f12 li .icon_061e9f12 { min-width: 10px; float: left; padding: 0 10px; font-size: 17px } .documents_061e9f12 ul.datacontainer_061e9f12 li.file_061e9f12 { padding: 5px 0; cursor: auto } .documents_061e9f12 ul.datacontainer_061e9f12 li .arrow_061e9f12 { float: right; margin-right: 10px } .documents_061e9f12 ul.datacontainer_061e9f12 li div.documentContainer_061e9f12 { padding: 5px 0; font-weight: 700 } .documents_061e9f12 ul.datacontainer_061e9f12 li div.documentContainer_061e9f12.open_061e9f12 { background-color: #edf3f1 } .documents_061e9f12 ul.datacontainer_061e9f12 li a { text-decoration: none; font-weight: 400 } .documents_061e9f12 ul.datacontainer_061e9f12 li ul { list-style: none; padding-left: 0 } .documents_061e9f12 ul.datacontainer_061e9f12 li ul li:last-of-type { border-bottom: none } .documents_061e9f12 ul.datacontainer_061e9f12 li ul .file_061e9f12, .documents_061e9f12 ul.datacontainer_061e9f12 li ul div.documentContainer_061e9f12 { padding-left: 10px }

HTML代码（补充完整你提供的片段）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="documents_061e9f12">
  <div class="titleContainer_061e9f12">
    <div class="title_061e9f12">Documents</div>
    <div class="buttonContainer_061e9f12">
      <div class="upperButtons_061e9f12">
        <div class="smallIcon_061e9f12"><i class="ms-Icon ms-Icon--Waffle" style="font-size:18px"></i></div>
        <div class="smallIcon_061e9f12"><i class="ms-Icon ms-Icon--GlobalNavButton" style="font-size:18px"></i></div>
      </div>
      <div class="lowerButtons_061e9f12">
        <div class="uploadBtn_061e9f12">Upload dokument</div>
        <div class="uploadIcon_061e9f12"><i class="ms-Icon ms-Icon--Upload" style="font-size:14px"></i></div>
      </div>
    </div>
  </div>
  <ul class="datacontainer_061e9f12">
    <li>
      <div class="documentContainer_061e9f12 open_061e9f12" 
           data-folder="https://addea.sharepoint.com/extranet/_api/Web/GetFolderByServerRelativePath(decodedurl='/extranet/Shared%20Documents/TEster')/Folders" 
           data-file="https://addea.sharepoint.com/extranet/_api/Web/GetFolderByServerRelativePath(decodedurl='/extranet/Shared%20Documents/TEster')/Files">
        <div class="icon_061e9f12"><span class="ms-Icon ms-Icon--OpenFolderHorizontal"></span></div>
        TEster
        <div class="arrow_061e9f12"></div>
      </div>
      <ul>
        <li>
          <div class="documentContainer_061e9f12" 
               data-folder="https://addea.sharepoint.com/extranet/_api/Web/GetFolderByServerRelativePath(decodedurl='/extranet/Shared%20Documents/TEster/test1')/Folders" 
               data-file="https://addea.sharepoint.com/extranet/_api/Web/GetFolderByServerRelativePath(decodedurl='/extranet/Shared%20Documents/TEster/test1')/Files">
            <div class="icon_061e9f12"><span class="ms-Icon ms-Icon--OpenFolderHorizontal"></span></div>
            test1
            <div class="arrow_061e9f12"></div>
          </div>
          <ul>
            <li>
              <div class="documentContainer_061e9f12">
                <div class="icon_061e9f12"><span class="ms-Icon ms-Icon--OpenFolderHorizontal"></span></div>
                Tester2
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

解决方案 #

要实现动态层级缩进，核心是让每一层嵌套的元素自动叠加缩进值，这里给你两种简单有效的方法：

方法1：给嵌套ul设置递增的内边距（推荐） #

这种方法直接作用于列表容器，所有子元素都会跟着缩进，代码最简洁：

/* 替换原来的嵌套ul样式 */
.documents_061e9f12 ul.datacontainer_061e9f12 li ul {
  list-style: none;
  padding-left: 10px; /* 第一层子列表缩进10px */
}
/* 递归让每一层子ul都增加10px缩进 */
.documents_061e9f12 ul.datacontainer_061e9f12 ul {
  padding-left: 10px;
}

不管你的列表有多少层嵌套，每一层都会自动比父级多10px的缩进，完全实现动态效果。

方法2：给每层级的内容元素叠加缩进 #

如果你需要更精准地控制内容元素的缩进，而不是整个列表容器，可以用这个方法：

/* 第一层子内容缩进10px */
.documents_061e9f12 ul.datacontainer_061e9f12 li ul .file_061e9f12, 
.documents_061e9f12 ul.datacontainer_061e9f12 li ul div.documentContainer_061e9f12 {
  padding-left: 10px;
}
/* 第二层子内容缩进20px */
.documents_061e9f12 ul.datacontainer_061e9f12 li ul li ul .file_061e9f12, 
.documents_061e9f12 ul.datacontainer_061e9f12 li ul li ul div.documentContainer_061e9f12 {
  padding-left: 20px;
}
/* 第三层及以上可以继续扩展，或者用通用选择器简化 */
.documents_061e9f12 ul.datacontainer_061e9f12 ul ul .file_061e9f12, 
.documents_061e9f12 ul.datacontainer_061e9f12 ul ul div.documentContainer_061e9f12 {
  padding-left: 20px;
}
.documents_061e9f12 ul.datacontainer_061e9f12 ul ul ul .file_061e9f12, 
.documents_061e9f12 ul.datacontainer_061e9f12 ul ul ul div.documentContainer_061e9f12 {
  padding-left: 30px;
}

进阶优化：用CSS变量统一控制缩进 #

如果以后想调整缩进大小，直接改变量值就行，非常方便：

/* 定义基础缩进变量 */
.documents_061e9f12 {
  --indent-size: 10px;
}
/* 递归应用缩进 */
.documents_061e9f12 ul.datacontainer_061e9f12 ul {
  padding-left: var(--indent-size);
}

这样修改后，你的Tester2就会比test1多10px的缩进，更深的层级也会自动跟着缩进，完美实现动态层级效果！

内容的提问来源于stack exchange，提问作者user7255640