How to achieve decimal numbering in ordered lists? [duplicate]

Answer 1

html code :

<ul>
  <li>1  </li>          
  <li>1.1</li>    
  <li>1.2</li>      
  <li>2  </li>                  
  <li>2.1</li>  
  <li>2.2</li>  
</ul>

css code:

li  {   list-style:none; }

Answer 2

For CSS-compliant browsers you could use:

ul { counter-reset:item; }
ul > li { counter-increment:item; }
ul > li:before {content: counter(item); }

ul > li > ul { counter-reset:subitem; }
ul > li > ul > li { counter-increment:subitem; }
ul > li > ul > li:before { content: counter(item) "." counter(subitem); }

Answer 3

CSS 2.1 provides user-definable counters, which can be used to count elements. Combined with the :before and :after pseudo-classes, you can output the counter value to create automatically numbered headings.

Unfortunately, at least Internet Explorer does not support any of this, even in the latest version. But at least Firefox does support it very well, so if you just want to add it as a enhancement which does not make your site unusable if it is not supported, you can still use it.

Answer 4

Consider using DL/DT/DD instead of OL/UL and hard-code the values in the DT.

Answer 5

One line of javascript will do this. Used in a table of contents:

<td class="session">
<script>
{document.getElementsByClassName("session")[num].innerHTML = "1." + (++num);}
</script>
</td>

num is a global variable in the document initialized to zero at an appropriate place upstream. The above produces 1.1 at the first instance. Change to num++ and get 1.0.

Answer 6

http://www.w3.org/TR/CSS2/generate.html

But, yeah, this is for modern browsers only. Nested OLs is probably the way to go.