Push each sub level of ul li

Question

In this example of my code I have several ul and li

When you run the example: you will notice that test1 is pushed 10px from the left because its a child of TEster , But I can't make Tester2 be pushed further 10px.

I'm trying to make this dynamic, and the demo is only a small amount of the actual data.

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

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

-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

Try using the text-indent property, which (unlike padding ) will not push nested <ul> elements over to the right.

I think you can also avoid styling all your items individually. Make your CSS more abstract, like this:

 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>