如何動態減少每個子列表寬度20px？

Question

我有一個菜單，並希望每個孩子類別比其父母的20px更窄。下面的代碼有效，但很醜陋。任何人都可以提出一種動態的方法嗎？

我有以下的HTML代碼：

<ul class="filetree"> 
    <li>Category 1</li> 
    <li>Category 2 
     <ul> 
      <li>SUBCAT 1 
       <ul> 
        <li>SUBCAT 2> 
         <ul> 
          <li>SUBCAT 3 
           <ul> 
            <li>SUBCAT 4</li> 
           </ul> 
          </li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li>Category 3</li> 
    <li>Category 3</li> 
</ul> 

下面CSS代碼：

ul.filetree li a { 
    width: 440px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 
ul.filetree li ul li a { 
    width: 420px; 
} 
ul.filetree li ul li ul li a { 
    width: 400px; 
} 
ul.filetree li ul li ul li ul li a { 
    width: 380px; 
} 
ul.filetree li ul li ul li ul li ul li a { 
    width: 360px; 
} 
ul.filetree li ul li ul li ul li ul li ul li a { 
    width: 340px; 
} 
ul.filetree li ul li ul li ul li ul li ul li ul li a { 
    width: 320px; 
} 
ul.filetree li ul li ul li ul li ul li ul li ul li ul li a { 
    width: 300px; 
} 

Answer 1

您可以添加margin-left例如：

ul.filetree li a { 
 
    width: 440px; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 
ul.filetree li ul li a { 
 
    margin-left:20px; 
 
}

<ul class="filetree"> 
 
    <li>Category 1</li> 
 
    <li>Category 2 
 
     <ul> 
 
      <li>SUBCAT 1 
 
       <ul> 
 
        <li>SUBCAT 2> 
 
         <ul> 
 
          <li>SUBCAT 3 
 
           <ul> 
 
            <li>SUBCAT 4</li> 
 
           </ul> 
 
          </li> 
 
         </ul> 
 
        </li> 
 
       </ul> 
 
      </li> 
 
     </ul> 
 
    </li> 
 
    <li>Category 3</li> 
 
    <li>Category 3</li> 
 
</ul>