Elenco ordinato HTML 1.1, 1.2 (contatori annidati e ambito) non funzionanti

88

Uso contatori annidati e ambito per creare un elenco ordinato:

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>
Espandi lo snippet

Mi aspetto il seguente risultato:

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

Invece, questo è quello che vedo (numerazione sbagliata) :

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

Non ne ho idea, qualcuno vede dove va storto?

Ecco un JSFiddle: http://jsfiddle.net/qGCUk/2/

html  css  html-lists 
— dirk
fonte

Risposte:

105

Deseleziona "normalizza CSS" - http://jsfiddle.net/qGCUk/3/ Il ripristino CSS utilizzato in questo fa sì che tutti i margini e le spaziature dell'elenco vengano impostati su 0

AGGIORNAMENTO http://jsfiddle.net/qGCUk/4/ - devi includere i tuoi sotto-elenchi nel tuo<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>
Espandi lo snippet

— Zoltan Toth
fonte
3
Come fare in modo che il suo indice sia seguito da un punto - come 1.> 1.1. 1.2. 1.3.e così via?
— URL87
2
Assicurati solo di correggere i selettori CSS in modo che non influisca su cose come gli elenchi di navigazione.
— Okomikeruko
@Okomikeruko Cosa significa "correggere i selettori CSS"? Perché sto affrontando esattamente il problema a cui hai accennato: questo trucco non riguarda solo l'elenco numerato per cui voglio usarlo, ma anche gli altri elenchi nel mio HTML. : - \ Nevermind: la risposta di Moshe Simantov lo risolve. :)
— antred
1
Gli attributi dell'elemento @antred come ide classconsentono di definire CSS specifici per quegli elementi con selettori. Se si utilizza una coperta li, ul, olecc, allora il css colpisce tutte le istanze di esso. Ma se imposti il ​​tuo elemento su <ol class="cleared">e il selettore CSS su ol.cleared, non influirai sugli altri olelementi inutilmente.
— Okomikeruko,
64

Usa questo stile per modificare solo gli elenchi nidificati:

ol {
    counter-reset: item;
}

ol > li {
    counter-increment: item;
}

ol ol > li {
    display: block;
}

ol ol > li:before {
    content: counters(item, ".") ". ";
    margin-left: -20px;
}
— Moshe Simantov
fonte
2
Grande! Ha funzionato fuori dagli schemi per me! Toda.
— yO_
3
Questa è la risposta migliore in quanto ha anche il primo livello con un punto e inserisce il contenuto.
— Martin Eckleben
se aggiungo font-weight: boldalla ol ol > li:beforelista annidata i contatori sono boldma non fa i contatori della lista di primo livello bold?
— Sushmit Sagar
14

Controllalo :

http://jsfiddle.net/PTbGc/

Il tuo problema sembra essere stato risolto.

Cosa si presenta per me (sotto Chrome e 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

Come l'ho fatto

Invece di :

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

Fare :

<li>Item 1</li>
<li>Item 2
   <ol>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
   </ol>
</li>
— Dottor Kameleon
fonte
7

Questa è un'ottima soluzione! Con alcune regole CSS aggiuntive puoi formattarlo proprio come un elenco di strutture di MS Word con un rientro della prima riga sospeso:

OL { 
  counter-reset: item; 
}
LI { 
  display: block; 
}
LI:before { 
  content: counters(item, ".") "."; 
  counter-increment: item; 
  padding-right:10px; 
  margin-left:-20px;
}
— ChaosFreak
fonte
2
Il problema con questo approccio è che non puoi copiare i numeri dell'elenco. Quindi, se copi una lista enorme, sarà senza numeri
— Rohit
1

Ho riscontrato un problema simile di recente. La soluzione consiste nell'impostare la proprietà di visualizzazione degli elementi li nell'elenco ordinato su list-item, e non display block, e assicurarsi che la proprietà display di ol non sia list-item. cioè

li { display: list-item;}

Con questo, il parser html vede tutto li come elemento dell'elenco e gli assegna il valore appropriato, e vede l'ol, come un elemento inline-block o block in base alle tue impostazioni, e non cerca di assegnare alcun valore di conteggio a esso.

— Babatunde Calebs
fonte
Questo duplica la numerazione.
— TylerH
0

La soluzione di Moshe è ottima, ma il problema potrebbe ancora sussistere se devi inserire l'elenco in un file div. (leggi: CSS counter-reset su elenco annidato )

Questo stile potrebbe prevenire questo 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>
Espandi lo snippet

È inoltre possibile attivare il ripristino del contatore li:before.

— saboshi69
fonte
cosa succede se non voglio il finale .nell'elenco annidato ma nell'elenco radice?
— Sushmit Sagar
0

Dopo aver esaminato altre risposte, ho trovato questo, basta applicare la classe nested-counter-listal oltag radice :

codice sass:

ol.nested-counter-list {
  counter-reset: item;

  li {
    display: block;

    &::before {
      content: counters(item, ".") ". ";
      counter-increment: item;
      font-weight: bold;
    }
  }

  ol {
    counter-reset: item;

    & > li {
      display: block;

      &::before {
        content: counters(item, ".") " ";
        counter-increment: item;
        font-weight: bold;
      }
    }
  }
}

codice css :

ol.nested-counter-list {
  counter-reset: item;
}
ol.nested-counter-list li {
  display: block;
}
ol.nested-counter-list li::before {
  content: counters(item, ".") ". ";
  counter-increment: item;
  font-weight: bold;
}
ol.nested-counter-list ol {
  counter-reset: item;
}
ol.nested-counter-list ol > li {
  display: block;
}
ol.nested-counter-list ol > li::before {
  content: counters(item, ".") " ";
  counter-increment: item;
  font-weight: bold;
}


ol.nested-counter-list {
  counter-reset: item;
}

ol.nested-counter-list li {
  display: block;
}

ol.nested-counter-list li::before {
  content: counters(item, ".") ". ";
  counter-increment: item;
  font-weight: bold;
}

ol.nested-counter-list ol {
  counter-reset: item;
}

ol.nested-counter-list ol>li {
  display: block;
}

ol.nested-counter-list ol>li::before {
  content: counters(item, ".") " ";
  counter-increment: item;
  font-weight: bold;
}
<ol class="nested-counter-list">
  <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>
Espandi lo snippet

E se hai bisogno di trascinare .alla fine dei contatori dell'elenco annidato usa questo:

ol.nested-counter-list {
  counter-reset: item;
}

ol.nested-counter-list li {
  display: block;
}

ol.nested-counter-list li::before {
  content: counters(item, ".") ". ";
  counter-increment: item;
  font-weight: bold;
}

ol.nested-counter-list ol {
  counter-reset: item;
}
<ol class="nested-counter-list">
  <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>
Espandi lo snippet

— Sushmit Sagar
fonte
0

Keep it Simple!

Soluzione più semplice e standard per incrementare il numero e mantenere il punto alla fine. Anche se ottieni il css corretto, non funzionerà se il tuo HTML non è corretto. vedi sotto.

CSS

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

SASS

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

Genitore figlio HTML

Se aggiungi il bambino assicurati che sia sotto il genitore li.

<!-- WRONG -->
<ol>
    <li>Parent 1</li> <!-- Parent is Individual. Not hugging -->
        <ol> 
            <li>Child</li>
        </ol>
    <li>Parent 2</li>
</ol>

<!-- RIGHT -->
<ol>
    <li>Parent 1 
        <ol> 
            <li>Child</li>
        </ol>
    </li> <!-- Parent is Hugging the child -->
    <li>Parent 2</li>
</ol>
— Dexter
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.