如何动态地将每个子列表宽度减少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>