Lista con números decimales

Question

es posible tener <li> números como esto ?:

1.1 First Item 
1.2 Second Item 
2.1 Other item 

Answer 1

Puede utilizar CSS y el contenido generado por los contadores, sin embargo adivinar qué navegador no lo soporta ...

Si necesita soporte general, necesitará hacerlo desde el servidor o con JavaScript.

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

http://www.evotech.net/blog/2009/05/css-content-counter-increment-counter-reset/

Answer 2

Esta página muestra todos los tipos disponibles de lista situados en HTML (junto con la compatibilidad del navegador):

http://www.quirksmode.org/css/lists.html

Como se puede ver, números de sub-acentuados no son una opción admitida, por lo que si desea hacerlo exactamente como lo sugirió, tendrá que hacerlo de forma manual, ya sea en texto plano o javascript o mediante CSS before: (esta última opción podría haber sido mi elección preferida, excepto que no funcionará en versiones anteriores de IE)

Como alternativa, simplemente acepte que HTML no lo admite, y vaya con un esquema de numeración alternativo que es soportado. El uso de listas anidadas le permitirá tener la lista externa numerada 1,2,3, etc., mientras que la lista interna está numerada I, II, III, IV, etc.

Espero que ayude.

Answer 3

Sólo por diversión, esta pequeña jQuery snippet

$("ol").each(function(i) { 
    $(this).children("li").not(":has(ol)").each(function(n, el) { 
     $(this).prepend("<span>" + i + "." + (n+1) + " </span>"); 
    }); 
}); 

produce el efecto deseado, pero sólo funciona con 2 niveles dados este tipo de diseño:

<ol> 
    <li> 
     <ol> 
      <li>One</li> 
      <li>Two</li> 
      <li>Three</li> 
     </ol> 
    </li> 
    <li> 
     <ol> 
      <li>One</li> 
      <li>Two</li> 
      <li>Three</li> 
     </ol> 
    </li> 
    <li> 
     <ol> 
      <li>One</li> 
      <li>Two</li> 
      <li>Three</li> 
      <li>Four</li> 
      <li>Five</li> 
     </ol> 
    </li> 
    <li> 
     <ol> 
      <li>One</li> 
      <li>Two</li> 
      <li>Three</li> 
      <li>Four</li> 
     </ol> 
    </li> 
</ol 

Answer 4

La forma correcta de hacerlo es mediante la usando la propiedad CSS de incremento de contador.
También podemos establecer secciones y subsecciones como "Sección 1", "1.1", "1.2", etc.
http://www.w3schools.com/cssref/pr_gen_counter-increment.asp

<style> 
    ol { counter-reset: item } 
    li { display: block } 
    li:before { content: counters(item, ".") " "; counter-increment: item } 
</style> 

    <ol> 
     <li>First level</li> 
     <li>First level 2 
      <ol> 
       <li>Second level</li> 
       <li>Second level 2 
        <ol><li>Third level</li></ol> 
       </li> 
      </ol> 
     </li>   
    </ol> 

Otra gran explicación: http://www.impressivewebs.com/css-counter-increment/