5

How to order list which produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, …) with css and html ?

So far getting output as,

enter image description here

for the below code,

HTML:

<ol>
<li>Lorem ipsum.</li>
<li>Excepteur sint occaecat cupidatat non proident:
    <ol>
        <li>sunt in culpa qui officia,</li>
        <li>deserunt mollit anim id est laborum.</li>
    </ol>
</li>
<li>Ut enim ad minim veniam.
    <ol>
        <li>Quis nostrud exercitation.</li>
        <li>Ullamco laboris nisi ut.
            <ol>
                <li>
                    Duis aute irure dolor
                </li>
            </ol>
        </li>
    </ol>
</li>

CSS:

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;    
}

li li {
  margin: 0;
}

li li:before {
  content: counters(item, ".") " ";
}

But i need to get the result as,

enter image description here

JSfiddle

user4157124
  • 2,809
  • 13
  • 27
  • 42
rinold simon
  • 2,782
  • 4
  • 20
  • 39
  • 1
    Possible duplicate of [Can ordered list produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, ...) with css?](http://stackoverflow.com/questions/4098195/can-ordered-list-produce-result-that-looks-like-1-1-1-2-1-3-instead-of-just-1) – Hidden Hobbes May 26 '16 at 10:36
  • it's not duplicate. the output format which i need is the different one – rinold simon May 26 '16 at 10:38
  • Hmm, you might be right @rinold the question looks to be the same but the answers provided are not what you are after. – Hidden Hobbes May 26 '16 at 10:44
  • The css is correct. But you need to set your list into a first list to have the number 1... – AxelH May 26 '16 at 10:53

4 Answers4

8

Just modify your HTML to have all your list inside an li element as follow:

<ol>
  <li class="parent">
      /** Your HTML **/
  </li>
</ol>

And add the following css to hide the first numbering:

li.parent:before { content: ""; }

Here you can find the demo.

Dani Corretja
  • 311
  • 1
  • 7
3

Just take out the extra dot (". ") from li:before in your CSS:

li:before {
content: counters(item, ".") ;
display: table-cell;
padding-right: 0.6em;    
}

Here is the Demo

Senjuti Mahapatra
  • 2,570
  • 4
  • 27
  • 38
1
Please Use this css 
----------






ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

li:before {
    content: counters(item, ".") "." counters(item, ".");
    display: table-cell;
    padding-right: 0.6em;    
}

li li {
    margin: 0;
}

li li:before {
    content: counters(item, ".") "." counter(item);
}


    <ol>
        <li>Lorem ipsum.</li>
        <li>Excepteur sint occaecat cupidatat non proident:
            <ol>
                <li>sunt in culpa qui officia,</li>
                <li>deserunt mollit anim id est laborum.</li>
            </ol>
        </li>
        <li>Ut enim ad minim veniam.
            <ol>
                <li>Quis nostrud exercitation.</li>
                <li>Ullamco laboris nisi ut.
                    <ol>
                        <li>
                            Duis aute irure dolor
                        </li>
                    </ol>
                </li>
            </ol>
        </li>
    </ol>
Govind jha
  • 400
  • 3
  • 16
0

You can use counters to do so! Can ordered list produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, ...) with css? Here's another question on the same topic answered :D

Community
  • 1
  • 1
David Landup
  • 169
  • 1
  • 16