Nested lists with indenting dynamic paddings

问题

Take a look at my code example at js bin: http://jsbin.com/iritep/3/edit

I'd like to indent the yellow colored item without continuing my hard coded css-rule:

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! */

Can I possibly make this css more dynamic without having to add the last line of css?

回答1:

I'm sorry, Stackoverflow didn't allow me to comment twice in such short notice. Here is the link to the solution to my problem.

http://jsbin.com/iritep/5/edit#javascript,html,live

回答2:

Change your css-rules slightly, you could do the following:

ul li{
  padding-left:20px;
}

This would indent every new level 20px further. See, if that still suits you. (indenting lists generally brings some minor styling-restrictions (like coloring a single line via li or a Element.))

来源：https://stackoverflow.com/questions/9924685/nested-lists-with-indenting-dynamic-paddings