CODEWITHSUNDEEP
htmlcss
Jeen Jay
Jeen Jay

Reputation: 426

Markers is a nested list

I want to find out whether it is possible to make out the markers to create a counter.

Just what I was able to achieve can be seen here: http://jsfiddle.net/Jeen/w6V74/1/

ol { 
  counter-reset: level-1; 
  list-style: none; 
  padding-left: 0;
} 
ol li:before { 
  counter-increment: level-1; 
  content: counter(level-1) '. ';
} 


ol ol { 
  counter-reset: level-2; 
  padding-left: 15px;
}
ol ol li:before { 
  counter-increment: level-2; 
  content: counter(level-1) '.' counter(level-2) '. ';
}


ol ol ol { 
  counter-reset: level-3; 
  padding-left: 30px;
} 
ol ol ol li:before { 
  counter-increment: level-3; 
  content: counter(level-1) '.' counter(level-2) '.' counter(level-3) '. '; 
}

enter image description here

In the end, I want to get what is shown in the second image

enter image description here

Upvotes: 2

Views: 961

Answers (2)

naota
naota

Reputation: 4718

You might want to check this page and change the way to nest your <ol>:
Proper way to make HTML nested list?

After you properly nest the list, add css below:

ol {
    display: table;
}
ol > li {
    display: table-row;
}
ol > li::before {
    display: table-cell;
}

DEMO: http://jsfiddle.net/naokiota/95xha/

Hope this helps.

Upvotes: 1

Marc Audet
Marc Audet

Reputation: 46785

Here is one way of styling the indentations.

Modify your CSS by adding the following rules: 

ol > li {
    padding-left: 1.0em;
    position: relative;
}
ol > ol > li {
    padding-left: 2.0em;
    position: relative;
}
ol > ol > ol > li {
    padding-left: 3.0em;
    position: relative;
}
ol li:before { 
    counter-increment: level-1; 
    content: counter(level-1) '. ';
    position: absolute;
    left: 0;
}

Take the generated content (ol li:before) out of the regular flow by using position: absolute.

The trick is to add some padding to the left with a suitable length to accommodate the counter label.

For each list item (ol>li, ol>ol>li, ol>ol>ol>li), set the padding-left to 1.0em, 2.0em, 3.0em respectively (or some similar values) and use position: relative to allow the generated content elements to be positioned with respect to the appropriate li parent element.

See fiddle: http://jsfiddle.net/audetwebdesign/m2vZd/

Upvotes: 1

Related Questions