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

Nested lists with indenting dynamic paddings

本文关键字：嵌套 列表 填充 动态 缩进      更新时间：2023-09-26

看看我在js-bin中的代码示例：http://jsbin.com/iritep/3/edit

我想在不继续我的硬编码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更动态吗？

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

http://jsbin.com/iritep/5/edit#javascript，html，实时

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

ul li{
  padding-left:20px;
}

这将使每个新级别进一步缩进20px。看，如果这仍然适合你。（缩进列表通常会带来一些较小的样式限制（例如通过li或a元素为单行着色。）

相关文章：