HTML- CSS；为层次结构中的每个下一个嵌套 ul li 添加 5px 到 margin-left

Question

我有嵌套的ul-->li树，我要的是set nested ul padding: 0;保证金：0 0 0 0；然后将 margin-left:5px 给它的父级 ul 边距。例如，在第 1 层，ul 是 margin-left:0px，那么第 2 层的嵌套 ul 将是（parent ul margin + 5px），这将是 0+5 = 5px；对于第 3 层的嵌套 ul 将是 (5px + 5xp) = 10px;

我更愿意通过 css 实现此目标，否则 jquery

https://jsfiddle.net/vr84pd6u/7/

html

<div>
<ul class="tree">
    <li><a>System Administration</a></li>
    <li><a>System Core</a>
        <ul>
           <li><a>f2</a></li>
           <li><a>f3</a>
              <ul>
                 <li><a>f4</a></li>
                 <li><a>f5</a></li>
                 <li><a>f6</a></li>
              </ul>
           </li>
           <li><a>f7</a>
               <ul>
                  <li><a>f8</a>            
                  <ul>
                     <li><a>f10</a>            
                     <ul>
                         <li><a>f11</a></li>
                     </ul>
                  </li>
                </ul>
            </li>
                 <li><a>f9</a></li>
             </ul>
         </li>
       </ul>
    </li>
    <li><a>MyFunctionA</a>
       <ul>
         <li><a>f12</a>
            <ul>
               <li><a>f13</a></li>
               <li><a>f14</a></li>
            </ul>
         </li>
          <li><a>f16</a></li>
        </ul>
      </li>
    <li><a>Course Management</a></li>
</ul>

</div>

css

 .tree ul li ul {
        border-left: 1px solid #D9DADB;
        background-color: limegreen;
        padding: 0;
        margin: 0 0 0 0;
    }

Answer 1

添加以下规则应该会产生您想要的效果：

/*Level 1*/
.tree > li > ul {
    margin: 0;
    padding: 0;
}
/*All other levels*/
.tree > li > ul ul {
    margin: 0 0 0 5px;
    padding: 0;
}

.tree > li > ul 将规则应用于 ul，这些规则是直接 li 的后代，li 本身是 .tree 的直接后代。 .tree > li > ul ul 获取第一层 ul.

的所有 ul 后代

.tree 中的每个 ul 与另一个 ul 的 children 将获得 5px 左边距，因为每个 ul 是另一个 ul 的 child 这个边距实际上将被堆叠。

.tree ul li ul {
    border-left: 1px solid #D9DADB;
    background-color: limegreen;
}
/*Level 1*/
.tree > li > ul {
    margin: 0;
    padding: 0;
}
/*All other levels*/
.tree > li > ul ul {
    margin: 0 0 0 5px;
    padding: 0;
}

<div>
    <ul class="tree">
        <li><a>System Administration</a></li>
        <li><a>System Core</a>
            <ul>
               <li><a>f2</a></li>
               <li><a>f3</a>
                  <ul>
                     <li><a>f4</a></li>
                     <li><a>f5</a></li>
                     <li><a>f6</a></li>
                  </ul>
               </li>
               <li><a>f7</a>
                   <ul>
                      <li><a>f8</a>            
                      <ul>
                         <li><a>f10</a>            
                         <ul>
                             <li><a>f11</a></li>
                         </ul>
                      </li>
                    </ul>
                </li>
                     <li><a>f9</a></li>
                 </ul>
             </li>
           </ul>
        </li>
        <li><a>MyFunctionA</a>
           <ul>
             <li><a>f12</a>
                <ul>
                   <li><a>f13</a></li>
                   <li><a>f14</a></li>
                </ul>
             </li>
              <li><a>f16</a></li>
            </ul>
          </li>
        <li><a>Course Management</a></li>
    </ul>
</div>

HTML- CSS；为层次结构中的每个下一个嵌套 ul li 添加 5px 到 margin-left

HTML- CSS; add 5px to margin-left for every next nested ul li in hierarchy

jquery

html

css

treeview

html

css