2012-10-04 12 views
5

No estoy seguro de entender la logística de esto. Básicamente quería hacer una simple lista en un blog web que se parece a:Cómo tener listas de sub pedidos correctamente

1. item1 
    a. item2 
2. item3 
    a. item4 
    b. item5 
3. item6 

Y así sucesivamente, básicamente una lista maestra ordenados numéricamente, con listas menor de cada elemento maestro que se lower-alpha ordenó.

que logra este efecto mediante el uso de este lenguaje de marcado HTML:

<ol> 
    <li>item1</li> 
    <ol> 
     <li>item2</li> 
    </ol> 
    <li>item3</li> 
    <ol> 
     <li>item4</li> 
     <li>item5</li> 
    </ol> 
    <li>item6</li> 
</ol> 

Con esta pequeña regla CSS:

ol ol { list-style-type: lower-alpha; } /* sub ordered lists */ 

Este problema que tenía era que de acuerdo con el validador del W3C:

Elemento ol no permitido como elemento secundario del elemento ol en este contexto.

creo que este problema debería tener una solución muy simple, yo no era capaz de encontrar uno, y no estoy seguro de entender por qué ol no puede ser un hijo de ol.

Respuesta

10

lo haces de esta manera:

<ol> 
    <li>item1 
     <ol> 
      <li>item2</li> 
     </ol> 
    </li> 
</ol> 

Es necesario poner la lista secundaria dentro del elemento de la lista para el nivel superior.

+0

Nevermind ¡Lo tengo ahora, adentro! Gracias – user17753

0

creo que su ol necesita estar en un li:

<ol> 
    <li>item1</li> 
    <li> 
     <ol> 
      <li>item2</li> 
     </ol> 
    </li> 
</ol> 
+0

Lo leí primero y me confundí, tiene que estar dentro del 'li' del item1 para lograr la presentación deseada. – user17753

4

Hay varias maneras de controlar su lista de sub-ordenada, ya sea con CSS o HTML. Casi se estaban logrando el efecto deseado, para obtener algo como esto:

1. item1 
    a. item2 
2. item3 
    a. item4 
    b. item5 
3. item6 

Su HTML debería tener este aspecto:

<ol> 
    <li>item1 
     <ol> 
      <li>item2</li> 
     </ol> 
    </li> 
    <li>item3 
     <ol> 
      <li>item4</li> 
      <li>item5</li> 
     </ol> 
    </li> 
    <li>item6</li> 
</ol> 

Y tu CSS debe tener este aspecto:

ol li{ list-style-type:decimal; } /* sub ordered lists level 1 */ 
ol li ol li { list-style-type: lower-alpha; } /* sub ordered lists level 2 */ 

También puede read more about a similar question here

Cuestiones relacionadas