Javascript 带有缩进动态填充的嵌套列表

看看我在js bin上的代码示例：

我想缩进黄色项目，而不继续我的硬编码css规则：

ul li a {padding-left: 20px;}
ul li ul li a {padding-left: 40px;}
ul li ul li ul li a {padding-left: 60px;}
ul li ul li ul li ul li a {padding-left: 80px;}   /* don't want this line! */

---

我是否可以在不添加css最后一行的情况下使此css更加动态？

稍微更改css规则，您可以执行以下操作：

ul li{
  padding-left:20px;
}

---

这将使每一个新级别进一步缩进20px。看，如果这对你还合适的话。（缩进列表通常会带来一些较小的样式限制（例如通过

li

或

a

元素为单行着色）。

对不起，Stackoverflow不允许我在这么短的时间内评论两次。这是我的问题解决方案的链接

---

每个链接左侧的空间作为链接的一部分很重要吗？您至少可以忽略选择器中的

ul

中除第一个之外的所有内容。是的，但问题是我需要将边框延伸到屏幕边缘。我是这样解决的：这仍然不能实现他所寻找的；他希望根据列表所处的级别进行不同的填充。@WilliamCallahan好吧，它正是这样的嵌套结构：它唯一做不到的事情（因为CSS不能做到这一点）是保持列表项的长度（但在最初的问题中没有包括）。