css3 - CSS simplify giant > list? -
i have bunch of css code, , want try , simplify can't seem figure out how it. simplify i'd have maybe 1 or 2 "statements" rather 15. browser support need latest chrome. there anyway it?
body.app .tree ul li li { padding-left: 25px; } body.app .tree ul li li li { padding-left: 50px; } body.app .tree ul li li li li { padding-left: 75px; } body.app .tree ul li li li li li { padding-left: 100px; } body.app .tree ul li li li li li li { padding-left: 125px; } body.app .tree ul li li li li li li li { padding-left: 150px; } body.app .tree ul li li li li li li li li li { padding-left: 175px; } body.app .tree ul li li li li li li li li li li { padding-left: 200px; }
the display
type of <li>
ignore padding or margin because you're supposed create new sub-levels in list using <ul>
inside <li>
.
<ul> <li> item 1-1 <ul> <li> item 2-1 </li> <li> item 2-2 </li> </ul> </li> <li> item 1-2 </li> <ul>
here's fiddle showing behavior.
note in fiddle can define custom padding each sub-level, 25px
wanted:
li > ul { padding-left:25px; }
Comments
Post a Comment