0

Currently I have a nested list that looks like this

<ul>
    <li>Potatoes</li>
        <ul>
            <li>Sweet Potatoes</li>
            <li>Fried Chips</li>
        </ul>
</ul>

And it renders like this:

  1. Potatoes

    1. Sweet Potatoes

    2. Fried Chips

Is there a way to have it render items as if it was all one list with more than one level, such as:

  1. Potatoes

    1.1 Sweet Potatoes

    1.2 Fried Chips

Mikey
  • 123
  • 2
  • 2
  • 7
  • Check this out http://jsfiddle.net/PTbGc/ – Runcorn May 21 '14 at 07:57
  • Thanks !! Just another quick question, is there anyway to stop the point "." from disappearing from the first line ? E.g in the top most level of the list the numbers display as 1 2 3 rather than 1. 2. 3. – Mikey May 21 '14 at 08:31
  • Ok you need to make few changes. Check this out http://jsfiddle.net/PTbGc/165/ – Runcorn May 21 '14 at 09:01
  • But if you want to add "." at the end in both list and it's sublist just add "." in the existing css like LI:before { content: counters(item, ".") "."; counter-increment: item } – Runcorn May 21 '14 at 09:02

2 Answers2

0

There you go! :)

ol {
    counter-reset: item;
}
ol li {
    display: block;
    position: relative;
}
ol li:before {
    content: counters(item, ".")".";
    counter-increment: item;
    position: absolute;
    margin-right: 100%;
    right: 10px; /* space between number and text */
}
Cowwando
  • 450
  • 5
  • 11
0

Try this:

li li:before {
counter-increment: item;
content: counter(item) ". ";
}

The double 'li' is so that it does it in the second level.

Tarun
  • 631
  • 7
  • 19
  • This will only work if there is a set number of subpoints for each number, e.g if point 1 has 2 subpoints and point 2 has 3 supboints then it does not work – Mikey May 21 '14 at 08:14