HTML/CSS Contorno de numeración

Question

En html/css puedo lograrlo?

1. 
1.1 
1.2 
2. 
2.1 
2.2 

utilizando las etiquetas LI y UL?

Answer 1

Sí, ver: https://developer.mozilla.org/en/CSS_Counters Pero no funciona en todos los navegadores/

Answer 2

No hay forma de multi-navegador de hacerlo.

Lo mejor que se puede lograr se anida listas ordenadas:

<ol> 
    <li>Item 1 
     <ol> 
      <li>Subitem 1</li> 
     </ol> 
    </li> 
</ol> 

y luego el estilo de cada lista anidada tener un tipo diferente:

ol { 
    list-style-type: upper-roman; 
} 
ol ol { 
    list-style-type: decimal; 
} 

Espero que esto ayude!

Answer 3

Considere utilizar DL/DT/DD en lugar de OL/UL y codifique los valores en el DT.

Answer 4

CSS 2.1 proporciona contadores definibles por el usuario, que se pueden utilizar para contar elementos. Combinado con las pseudo-clases: before y: after, puede generar el valor del contador para crear títulos numerados automáticamente.

Desafortunadamente, al menos Internet Explorer no admite nada de esto, incluso en la última versión. Pero al menos Firefox lo admite muy bien, así que si solo quieres agregarlo como una mejora que no haga que tu sitio no se pueda usar si no es compatible, igual puedes usarlo.

Answer 5

Para CSS2 compatible con el navegador del que podría utilizar

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 6

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

Pero, sí, esto es sólo para los navegadores modernos. Los OLs anidados es probablemente el camino a seguir.

Answer 7

código html:

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

código CSS:

li { list-style:none; } 

Answer 8

Una línea de javascript hará esto. Se utiliza en una tabla de contenidos:

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

num es una variable global en el documento inicializado a cero en un lugar adecuado de aguas arriba. Lo anterior produce 1.1 en la primera instancia. Cambie a num ++ y obtenga 1.0.