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

【问题标题】：HTML- CSS; add 5px to margin-left for every next nested ul li in hierarchyHTML-CSS；为层次结构中的每个下一个嵌套 ul li 添加 5px 到 margin-left
【发布时间】：2015-03-24 20:02:34
【问题描述】：

我有嵌套的 ul-->li 树，我想要设置嵌套的 ul padding: 0;边距：0 0 0 0；然后将 margin-left:5px 赋予其父 ul 边距。例如在第 1 层，ul 是 margin-left:0px 然后嵌套在第 2 层的 ul 将是（父 ul 边距 + 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;
    }

【问题讨论】：

标签： jquery html css treeview

【解决方案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 的子级，都将获得 5px 左边距，因为每个 ul 都是另一个 ul 的子级，这个边距实际上会被堆叠。

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

【讨论】：