Question

在我的代码示例中，我有几个ul和li

运行示例时：您会注意到test1从左侧推了10px，因为它是TEster的孩子，但我无法推动Tester2进一步10px。

我试图让这种动态变化，演示只是少量的实际数据。

＆＃13;

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

＆＃13;

<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>
    </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>
        <div class="arrow_061e9f12"><span class="ms-Icon ms-Icon--CaretUpSolid8"></span></div>
        <div>TEster</div>
      </div>
      <ul>
        <li>
          <div class="documentContainer_061e9f12 open_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>
            <div class="arrow_061e9f12"><span class="ms-Icon ms-Icon--CaretUpSolid8"></span></div>
            <div>test1</div>
          </div>
          <ul>
            <li>
              <div class="documentContainer_061e9f12 open_061e9f12" data-folder="https://addea.sharepoint.com/extranet/_api/Web/GetFolderByServerRelativePath(decodedurl='/extranet/Shared%20Documents/TEster/test1/tester2')/Folders" data-file="https://addea.sharepoint.com/extranet/_api/Web/GetFolderByServerRelativePath(decodedurl='/extranet/Shared%20Documents/TEster/test1/tester2')/Files">
                <div class="icon_061e9f12"><span class="ms-Icon ms-Icon--OpenFolderHorizontal"></span></div>
                <div class="arrow_061e9f12"><span class="ms-Icon ms-Icon--CaretUpSolid8"></span></div>
                <div>tester2</div>
              </div>
              <ul></ul>
            </li>
            <li class="file_061e9f12">
              <div class="icon_061e9f12"><span class="ms-Icon ms-Icon--TextDocument"></span></div>
              <div><a href="https://addea.sharepoint.com/extranet/Shared Documents/TEster/test1/text1 - Kopi (4).txt" target="_blank">text1 - Kopi (4).txt</a></div>
            </li>
            <li class="file_061e9f12">
              <div class="icon_061e9f12"><span class="ms-Icon ms-Icon--TextDocument"></span></div>
              <div><a href="https://addea.sharepoint.com/extranet/Shared Documents/TEster/test1/text1 - Kopi (3).txt" target="_blank">text1 - Kopi (3).txt</a></div>
            </li>
            <li class="file_061e9f12">
              <div class="icon_061e9f12"><span class="ms-Icon ms-Icon--TextDocument"></span></div>
              <div><a href="https://addea.sharepoint.com/extranet/Shared Documents/TEster/test1/text1 - Kopi (2).txt" target="_blank">text1 - Kopi (2).txt</a></div>
            </li>
          </ul>
        </li>
        <li class="file_061e9f12">
          <div class="icon_061e9f12"><span class="ms-Icon ms-Icon--TextDocument"></span></div>
          <div><a href="https://addea.sharepoint.com/extranet/Shared Documents/TEster/text1 - Kopi (5).txt" target="_blank">text1 - Kopi (5).txt</a></div>
        </li>
        <li class="file_061e9f12">
          <div class="icon_061e9f12"><span class="ms-Icon ms-Icon--TextDocument"></span></div>
          <div><a href="https://addea.sharepoint.com/extranet/Shared Documents/TEster/text1 - Kopi.txt" target="_blank">text1 - Kopi.txt</a></div>
        </li>
      </ul>
    </li>
    <li class="file_061e9f12">
      <div class="icon_061e9f12"><span class="ms-Icon ms-Icon--TextDocument"></span></div>
      <div><a href="https://addea.sharepoint.com/extranet/Shared Documents/text1.txt" target="_blank">text1.txt</a></div>
    </li>
  </ul>
</div>

＆＃13;

-TEster
  -test1
    -tester2
    -text1 - Kopi(4).txt
    -text1 - Kopi(3).txt
    -text1 - Kopi(2).txt
  -text1 - Kopi(5).txt
  -text1 - Kopi.txt
-text1.txt

Answer 1

尝试使用text-indent属性，该属性（与padding不同）不会将嵌套的<ul>元素推到右侧。

我认为您还可以避免单独设置所有商品的样式。让你的CSS更抽象，像这样：

ul {
  list-style: none;
  padding-left: 0;
}

li {
  border-top: 1px solid #dadada;
  cursor: pointer;
  font-weight: 700;
  padding: 5px 0;
}

ul ul { text-indent: 10px; }
ul ul ul { text-indent: 20px; }
ul ul ul ul { text-indent: 30px; }
/* Etc., as deep as you need */

a {
  font-weight: normal;
}

<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>
    </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>
        <div class="arrow_061e9f12"><span class="ms-Icon ms-Icon--CaretUpSolid8"></span></div>
        <div>TEster</div>
      </div>
      <ul>
        <li>
          <div class="documentContainer_061e9f12 open_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>
            <div class="arrow_061e9f12"><span class="ms-Icon ms-Icon--CaretUpSolid8"></span></div>
            <div>test1</div>
          </div>
          <ul>
            <li>
              <div class="documentContainer_061e9f12 open_061e9f12" data-folder="https://addea.sharepoint.com/extranet/_api/Web/GetFolderByServerRelativePath(decodedurl='/extranet/Shared%20Documents/TEster/test1/tester2')/Folders" data-file="https://addea.sharepoint.com/extranet/_api/Web/GetFolderByServerRelativePath(decodedurl='/extranet/Shared%20Documents/TEster/test1/tester2')/Files">
                <div class="icon_061e9f12"><span class="ms-Icon ms-Icon--OpenFolderHorizontal"></span></div>
                <div class="arrow_061e9f12"><span class="ms-Icon ms-Icon--CaretUpSolid8"></span></div>
                <div>tester2</div>
              </div>
              <ul></ul>
            </li>
            <li class="file_061e9f12">
              <div class="icon_061e9f12"><span class="ms-Icon ms-Icon--TextDocument"></span></div>
              <div><a href="https://addea.sharepoint.com/extranet/Shared Documents/TEster/test1/text1 - Kopi (4).txt" target="_blank">text1 - Kopi (4).txt</a></div>
            </li>
            <li class="file_061e9f12">
              <div class="icon_061e9f12"><span class="ms-Icon ms-Icon--TextDocument"></span></div>
              <div><a href="https://addea.sharepoint.com/extranet/Shared Documents/TEster/test1/text1 - Kopi (3).txt" target="_blank">text1 - Kopi (3).txt</a></div>
            </li>
            <li class="file_061e9f12">
              <div class="icon_061e9f12"><span class="ms-Icon ms-Icon--TextDocument"></span></div>
              <div><a href="https://addea.sharepoint.com/extranet/Shared Documents/TEster/test1/text1 - Kopi (2).txt" target="_blank">text1 - Kopi (2).txt</a></div>
            </li>
          </ul>
        </li>
        <li class="file_061e9f12">
          <div class="icon_061e9f12"><span class="ms-Icon ms-Icon--TextDocument"></span></div>
          <div><a href="https://addea.sharepoint.com/extranet/Shared Documents/TEster/text1 - Kopi (5).txt" target="_blank">text1 - Kopi (5).txt</a></div>
        </li>
        <li class="file_061e9f12">
          <div class="icon_061e9f12"><span class="ms-Icon ms-Icon--TextDocument"></span></div>
          <div><a href="https://addea.sharepoint.com/extranet/Shared Documents/TEster/text1 - Kopi.txt" target="_blank">text1 - Kopi.txt</a></div>
        </li>
      </ul>
    </li>
    <li class="file_061e9f12">
      <div class="icon_061e9f12"><span class="ms-Icon ms-Icon--TextDocument"></span></div>
      <div><a href="https://addea.sharepoint.com/extranet/Shared Documents/text1.txt" target="_blank">text1.txt</a></div>
    </li>
  </ul>
</div>

推送ul li

1 个答案: