¿Cómo crear una lista con números anidados en HTML y CSS?

Me refiero a una lista de este tipo:

1.1
1.2
1.3
1.3.1
1.3.2
1.3.2.1

Pero obviamente que no sea escribiendo los números manualmente uno por uno. ¿Es posible?

Son Order List <ol> anidados :)

Y usas ahí counter y conter-reset

12 Generated content, automatic numbering, and lists
http://www.w3.org/TR/CSS2/generate.html

Make an ordered list go up as 1.1,1.2,1.3 instead of 1,2,3.
http://doctype.com/make-ordered-list-go ... nstead-123

Is it possible to add subitems into an ordered list?
http://doctype.com/possible-add-subitems-ordered-list-6

Wow, gracias, estaba casi seguro de que me dirían que es imposible.

Pero tengo un problema: cuando el texto que va enlistado es muy largo y se pasa al siguiente renglón, comienza justo por debajo del número en lugar de respetar la sangría, así:



Me gustaría que el texto se mantuviera siempre separado del número como ocurre en Word (y en las mismas listas normales de HTML):



¿Alguna idea de cómo resolverlo?

Ya lo logré, aunque me gustaría una opinión del método utilizado. Lo que hice fue meter el texto dentro de etiquetas P de esta forma:

Código: Seleccionar todo

<ol>
   <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed ipsum enim, id iaculis augue. Phasellus lacinia, eros sit amet luctus semper, lorem est venenatis nisl, ut rhoncus sem ipsum sed tellus. Praesent et eros sem. Donec quis metus odio. Curabitur hendrerit quam in nibh ornare at dictum turpis pretium.</p></li>
   <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed ipsum enim, id iaculis augue. Phasellus lacinia, eros sit amet luctus semper, lorem est venenatis nisl, ut rhoncus sem ipsum sed tellus. Praesent et eros sem. Donec quis metus odio. Curabitur hendrerit quam in nibh ornare at dictum turpis pretium.</p>
      <ol>
         <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed ipsum enim, id iaculis augue. Phasellus lacinia, eros sit amet luctus semper, lorem est venenatis nisl, ut rhoncus sem ipsum sed tellus. Praesent et eros sem. Donec quis metus odio. Curabitur hendrerit quam in nibh ornare at dictum turpis pretium.</p></li>
         <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed ipsum enim, id iaculis augue. Phasellus lacinia, eros sit amet luctus semper, lorem est venenatis nisl, ut rhoncus sem ipsum sed tellus. Praesent et eros sem. Donec quis metus odio. Curabitur hendrerit quam in nibh ornare at dictum turpis pretium.</p>
            <ol>
               <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed ipsum enim, id iaculis augue. Phasellus lacinia, eros sit amet luctus semper, lorem est venenatis nisl, ut rhoncus sem ipsum sed tellus. Praesent et eros sem. Donec quis metus odio. Curabitur hendrerit quam in nibh ornare at dictum turpis pretium.</p>
                  <ol>
                     <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed ipsum enim, id iaculis augue. Phasellus lacinia, eros sit amet luctus semper, lorem est venenatis nisl, ut rhoncus sem ipsum sed tellus. Praesent et eros sem. Donec quis metus odio. Curabitur hendrerit quam in nibh ornare at dictum turpis pretium.</p></li>
                  </ol>
               </li>
            </ol>
         </li>
      </ol>
   </li>   
</ol>

Y le apliqué estos estilos:

Código: Seleccionar todo

ol {
counter-reset:item;
padding-left:1em;
text-align:justify;
}
li {
display:block;
}
li:before {
content:counters(item, ".", decimal) ". ";
counter-increment:item;
float:left;
white-space:pre;
}
li p {
overflow:hidden;
}
ol li ol li ol {
padding-left:2em;
}

El resultado se ve así:



¿Qué tal? ¿Alguna corrección o solución más obvia que no haya visto?

Creo que encontré la "solución más obvia" de la que hablaba.

Le quité las etiquetas P y sus estilos correspondientes (li p) y agregué un height:100%; en li:before. El resultado luce casi igual excepto que ya no tiene los márgenes superior e inferior característicos de las etiquetas P.

Me topé con otro problema: por alguna extraña (yo diría que tonta) razón, Opera no hace caso del height:100%. Luego de mucho experimentar, lo que me funcionó fue aplicar los estilos de esta forma:

Código: Seleccionar todo

ol {
counter-reset:item;
text-align:justify;
}
li {
display:block;
}
li:before {
content:counters(item, ".", decimal) ". ";
counter-increment:item;
margin-left:-1.2em;
position:absolute;
}
ol li ol li:before {
margin-left:-2em;
}
ol li ol li ol li:before {
margin-left:-2.7em;
}
ol li ol li ol li ol {
padding-left:3.5em;
}
ol li ol li ol li ol li:before {
margin-left:-3.5em;
}

Y así es como se ve en Opera, Firefox, Chrome y Safari:



No sé por qué pero creo que siempre acabo dando con la opción más laboriosa y llena de código inútil.