La lista ordenada de HTML 1.1, 1.2 (contadores anidados y alcance) no funciona

7 minutos de lectura

La lista ordenada de HTML 11 12 contadores anidados y
puñal

Uso contadores anidados y alcance para crear una lista ordenada:

ol {
    counter-reset: item;
    padding-left: 10px;
}
li {
    display: block
}
li:before {
    content: counters(item, ".") " ";
    counter-increment: item
}
<ol>
    <li>one</li>
    <li>two</li>
    <ol>
        <li>two.one</li>
        <li>two.two</li>
        <li>two.three</li>
    </ol>
    <li>three</li>
    <ol>
        <li>three.one</li>
        <li>three.two</li>
        <ol>
            <li>three.two.one</li>
            <li>three.two.two</li>
        </ol>
    </ol>
    <li>four</li>
</ol>

Espero el siguiente resultado:

1. one
2. two
  2.1. two.one
  2.2. two.two
  2.3. two.three
3. three
  3.1 three.one
  3.2 three.two
    3.2.1 three.two.one
    3.2.2 three.two.two
4. four

En cambio, esto es lo que veo. (numeración incorrecta):

1. one
2. two
  2.1. two.one
  2.2. two.two
  2.3. two.three
2.4 three <!-- this is where it goes wrong, when going back to the parent -->
  2.1 three.one
  2.2 three.two
    2.2.1 three.two.one
    2.2.2 three.two.two
2.3 four

No tengo ni idea, ¿alguien ve dónde va mal?

Aquí hay un JSFiddle: http://jsfiddle.net/qGCUk/2/

La lista ordenada de HTML 11 12 contadores anidados y
Zoltán Toth

Desmarque “normalizar CSS” – http://jsfiddle.net/qGCUk/3/
El restablecimiento de CSS utilizado en el valor predeterminado de todos los márgenes y rellenos de la lista a 0

ACTUALIZAR http://jsfiddle.net/qGCUk/4/ – tienes que incluir tus sub-listas en tu principal <li>

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

  • Cómo hacer que su índice sea seguido por un punto, como 1. > 1.1. 1.2. 1.3. y así ?

    – URL87

    28 mayo 2014 en 15:04

  • Solo asegúrese de arreglar los selectores css para que no afecte cosas como las listas de navegación.

    – Okomikeruko

    14 mar. 17 en 19:24

  • @Okomikeruko ¿Qué significa “arreglar los selectores CSS”? Porque estoy teniendo exactamente el problema al que aludió: este truco no solo afecta la lista numerada para la que quiero usarlo, sino también las otras listas en mi HTML. :- No importa: la respuesta de Moshe Simantov soluciona eso. 🙂

    – antred

    27 feb. 2020 a las 12:42


  • atributos del elemento @antred como id y class le permite definir css específico para esos elementos con selectores. Si usas una manta li, ul, ol etc., entonces el CSS afecta a todas sus instancias. Pero si configuras tu elemento para <ol class="cleared"> y tu selector css para ol.clearedentonces no afectas a otros ol elementos innecesariamente.

    – Okomikeruko

    27 feb. 2020 a las 13:40


  • ¿Por qué está li display: block aquí?

    – Joel Peltonen

    27 ene.

Use este estilo para cambiar solo las listas anidadas:

ol {
    counter-reset: item;
}

ol > li {
    counter-increment: item;
}

ol ol > li {
    display: block;
}

ol ol > li:before {
    content: counters(item, ".") ". ";
    margin-left: -20px;
}

  • ¡Estupendo! ¡Funcionó fuera de la caja para mí! Toda.

    – yo_

    29 mar. 19 a las 14:06

  • Esta es la mejor respuesta ya que también tiene el primer nivel con un punto e inserta el contenido.

    – Martín Eckleben

    22 ene.

  • si agrego font-weight: bold a ol ol > li:before los contadores de la lista anidada son bold pero no hace los contadores de la lista de primer nivel bold?

    – Sushmit Sagar

    16 jul. 2020 14:18

  • Para hacer que esto funcione ordenadamente para mí, tuve que agregar float: left; al :before

    –James Nisbet

    23 sep.

La lista ordenada de HTML 11 12 contadores anidados y
Dr. Kameleon

Mira esto :

http://jsfiddle.net/PTbGc/

Su problema parece haberse solucionado.


Lo que aparece para mí (bajo Chrome y Mac OS X)

1. one
2. two
  2.1. two.one
  2.2. two.two
  2.3. two.three
3. three
  3.1 three.one
  3.2 three.two
    3.2.1 three.two.one
    3.2.2 three.two.two
4. four

como lo hice


En vez de :

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

Hacer :

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

1644154026 6 La lista ordenada de HTML 11 12 contadores anidados y
CaosFreak

¡Esta es una gran solución! Con algunas reglas CSS adicionales, puede formatearlo como una lista de esquemas de MS Word con una sangría colgante en la primera línea:

OL { 
  counter-reset: item; 
}
LI { 
  display: block; 
}
LI:before { 
  content: counters(item, ".") "."; 
  counter-increment: item; 
  padding-right:10px; 
  margin-left:-20px;
}

1644154027 962 La lista ordenada de HTML 11 12 contadores anidados y
Diestro

¡Mantenlo simple!

Una solución más simple y estándar para incrementar el número y conservar el punto al final. Incluso si obtiene el css correcto, no funcionará si su HTML no es correcto. vea abajo.

CSS

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

HABLAR CON DESCARO A

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

padre-hijo HTML

Si agrega al niño, asegúrese de que esté debajo del padre. li.

No funcionará ✘

Fíjate en el padre li y el niño ol li son individuales aquí, esto no funcionará.

<ol>
    <li>Parent 1</li> <!-- Parent has open and close li tags -->
    <ol> 
        <li>Child</li>
    </ol>
    <li>Parent 2</li>
</ol>

Funcionará ✔

Necesitas colocar el ol li elemento hijo dentro del padre li. Fíjate en el padre li está abrazando al niño.

<ol>

    <li>Parent 1 <!-- Parent open li tag -->
        <ol> 
            <li>Child</li>
        </ol>
    </li> <!-- Parent close li tag -->

    <li>Parent 2</li>
</ol>

1644154027 219 La lista ordenada de HTML 11 12 contadores anidados y
Babatunde Calebs

Encontré un problema similar recientemente. La solución consiste en establecer la propiedad de visualización de los elementos li en la lista ordenada en elemento de lista y no en bloque de visualización, y asegurarse de que la propiedad de visualización de ol no sea elemento de lista. es decir

li { display: list-item;}

Con esto, el analizador html ve todo li como el elemento de la lista y le asigna el valor apropiado, y ve el ol, como un bloque en línea o un elemento de bloque basado en su configuración, y no intenta asignar ningún valor de conteo a eso.

1644154027 990 La lista ordenada de HTML 11 12 contadores anidados y
saboshi69

La solución de Moshe es excelente, pero el problema aún puede existir si necesita colocar la lista dentro de un div. (lea: restablecimiento del contador de CSS en la lista anidada)

Este estilo podría evitar ese problema:

ol > li {
    counter-increment: item;
}

ol > li:first-child {
  counter-reset: item;
}

ol ol > li {
    display: block;
}

ol ol > li:before {
    content: counters(item, ".") ". ";
    margin-left: -20px;
}
<ol>
  <li>list not nested in div</li>
</ol>

<hr>

<div>
  <ol>
  <li>nested in div</li>
  <li>two
    <ol>
      <li>two.one</li>
      <li>two.two</li>
      <li>two.three</li>
    </ol>
  </li>
  <li>three
    <ol>
      <li>three.one</li>
      <li>three.two
        <ol>
          <li>three.two.one</li>
          <li>three.two.two</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>four</li>
  </ol>
</div>

También puede configurar el reinicio del contador en li:before.

  • ¿Qué pasa si no quiero el seguimiento? . en la lista anidada pero en la lista raíz?

    – Sushmit Sagar

    16 jul. 2020 a las 14:29

.

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad