Best IT Recipes

Html ordered list 1.1, 1.2 (Nested counters and scope) not working

I use nested counters and scope to create an ordered html list.

This is my code: http://jsfiddle.net/qGCUk/2/

I expect the following result:

1. one 2. two 2.1. two.one 2.2. two.two 2.3. two.three 3. three 3.1 three.one 3.2 three.two 3.2.1 three.two.one 3.2.2 three.two.two 4. four

Instead, I see (wrong numbering) :

 1. one 2. two 2.1. two.one 2.2. two.two 2.3. two.three 2.4 three <!-- this is where it goes wrong, when going back to the parent --> 2.1 three.one 2.2 three.two 2.2.1 three.two.one 2.2.2 three.two.two 2.3 four

I have no clue, does anyone see where this is going wrong?

+48
html css
May 01 '12 at 23:53
source share
5 answers

Uncheck "normalize CSS" - http://jsfiddle.net/qGCUk/3/ CSS reset, used by default for all list boxes and paddings for 0

UPDATE http://jsfiddle.net/qGCUk/4/ - you should include your sub-lists in your main <li>

 <ol> <li>one</li> <li>two <ol> <li>two.one</li> <li>two.two</li> <li>two.three</li> </ol> </li> <li>three <ol> <li>three.one</li> <li>three.two <ol> <li>three.two.one</li> <li>three.two.two</li> </ol> </li> </ol> </li> <li>four</li> </ol>
+45
May 01 '12 at 11:55 a.m.
source share

Use this style to change only nested lists:

 ol { counter-reset: item; } ol > li { counter-increment: item; } ol ol > li { display: block; } ol ol > li:before { content: counters(item, ".") ". "; margin-left: -20px; }
+32
May 19, '15 at 13:18
source share

Check this:

http://jsfiddle.net/PTbGc/

Your problem seems to be fixed.



What is displayed to me (on Chrome and Mac OS X)

 1. one 2. two 2.1. two.one 2.2. two.two 2.3. two.three 3. three 3.1 three.one 3.2 three.two 3.2.1 three.two.one 3.2.2 three.two.two 4. four


How i did it



Instead

 <li>Item 1</li> <li>Item 2</li> <ol> <li>Subitem 1</li> <li>Subitem 2</li> </ol>

Do:

 <li>Item 1</li> <li>Item 2 <ol> <li>Subitem 1</li> <li>Subitem 2</li> </ol> </li>
+11
May 2, '12 at 0:00
source share

This is a great solution! With a few additional CSS rules, you can format it in the same way as a list of MS Word outlines with a hanging indent on the first line:

 OL { counter-reset: item; } LI { display: block; } LI:before { content: counters(item, ".") "."; counter-increment: item; padding-right:10px; margin-left:-20px; }
+6
Jul 11 '13 at 17:23
source share

I recently encountered a similar problem. The fix is ​​to set the display property of the elements li in the ordered list to the list item, and not to the display unit, and make sure that the display property ol is not a list item. i.e

 li { display: list-item;}

At the same time, the html analyzer sees all li as an element of the list and assigns it the corresponding value and sees ol as an element of the built-in block or block based on your settings, and does not try to assign any account value to it.

+2
Feb 08 '16 at 23:37
source share


More articles:


All Articles