Geek asks and answers

Styling an arbitrary nested list

I have a nested list structure and am trying to create them using CSS. I want each level to be indented more than each previous one, but I want the top border for each list to expand to the end of the parent list . Here is what I have:

<!DOCTYPE html>
<html><head>
<title>nested list test</title>
<style type="text/css">
ul, li {
  margin: 0; padding: 0; list-style: none;
}
#outer {
  width: 300px; border: solid black 2px;
}
#outer ul {
  border-top: solid #bbbbbb 1px;
}
#outer > li > ul > li > span {
  padding-left: 30px;
}
#outer > li > ul > li > ul > li > span {
  padding-left: 60px;
}
</style>
</head>
<body>
<ul id="outer">
  <li><span>Item 1</span></li>
  <li><span>Item 2</span>
    <ul>
      <li><span>Item 2a</span></li>
      <li><span>Item 2b</span>
        <ul>
          <li><span>Item 2b1</span></li>
          <li><span>Item 2b2</span>
            <ul>
              <li><span>Item 2b2a</span></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
</body></html>

http://jsfiddle.net/pwaxQ/1/. , 3 , , . , 4 , , . . Javascript, , , CSS, .

+3
2

, , , -1000 +1030, , . - , , .

+1

, . , , :

<!DOCTYPE html>
<html><head>
<title>nested list test</title>
<style type="text/css">
ul, li {
  margin: 0; padding: 0; list-style: none;
}
    #outer {
  width: 300px; border: solid black 2px;
}
#outer ul {
  border-top: solid #bbbbbb 1px;
}

#outer .level1 li > span { padding-left: 30px; }
#outer .level2 li > span { padding-left: 60px; }
#outer .level3 li > span { padding-left: 90px; }

</style>
</head>
<body>
<ul id="outer">
  <li><span>Item 1</span></li>
  <li><span>Item 2</span>
    <ul class="level1">
      <li><span>Item 2a</span></li>
      <li><span>Item 2b</span>
        <ul class="level2">
          <li><span>Item 2b1</span></li>
          <li><span>Item 2b2</span>
            <ul class="level3">
              <li><span>Item 2b2a</span></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

</body></html>

SASS, , , , , :

!levels = 10
@for !i from 0 to !levels
  #outer ul.level#{!i} > li 
    padding-left: #{!i*30}px
0

More articles:


All Articles