CODEWITHSUNDEEP
javascriptcssnestedhtml-lists
dsilfver
dsilfver

Reputation: 31

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?

Upvotes: 0

Views: 2973

Answers (2)

dsilfver
dsilfver

Reputation: 31

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

Upvotes: 1

Christoph
Christoph

Reputation: 51201

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.))

Upvotes: 0

Related Questions