HTML- CSS； 对于层次结构中的每个下一个嵌套ul li，在margin-left处添加5px

Question

我嵌套了ul-> li树，我要设置嵌套的ul填充：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;
    }

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其本身的直接后裔.tree 。 .tree > li > ul ul得到所有ul作为第一电平的后代ul 。

每个ul在.tree是儿童至另一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>