Lista Html ordenada 1.1, 1.2 (contadores e escopo aninhados) não funciona

87

Eu uso contadores aninhados e escopo para criar uma 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>
Expandir snippet

Espero o seguinte 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

Em vez disso, é isso que vejo (numeração errada) :

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

Eu não tenho ideia, alguém vê onde dá errado?

Aqui está um JSFiddle: http://jsfiddle.net/qGCUk/2/

html css html-lists punhal
fonte

Respostas:

102

Desmarque "normalizar CSS" - http://jsfiddle.net/qGCUk/3/ A redefinição de CSS usada nesse padrão padroniza todas as margens e preenchimentos da lista para 0

ATUALIZAÇÃO http://jsfiddle.net/qGCUk/4/ - você deve incluir suas sublistas em seu<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>
Expandir snippet

Zoltan Toth
fonte
2
Como fazer com que seu índice seja seguido por ponto - como 1.> 1.1. 1.2. 1.3.e assim por diante?
URL87
2
Apenas certifique-se de corrigir os seletores de css para que não afete coisas como listas de navegação.
Okomikeruko
@Okomikeruko O que significa "consertar os seletores de css"? Porque estou enfrentando exatamente o problema ao qual você aludiu - esse truque não afeta apenas a lista numerada para a qual desejo usá-lo, mas também as outras listas em meu HTML. : - \ Não importa: a resposta de Moshe Simantov corrige isso. :)
antred
1
Os atributos do elemento @antred gostam ide classpermitem que você defina css específico para esses elementos com seletores. Se você usar um cobertor li, ul, oletc, então o css afeta todas as instâncias dele. Mas se você definir seu elemento como <ol class="cleared">e seu seletor css como ol.cleared, você não afetará outros olelementos desnecessariamente.
Okomikeruko
64

Use este estilo para alterar apenas as listas aninhadas:

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
Ótimo! Funcionou fora da caixa para mim! Toda.
yO_
3
Esta é a melhor resposta, pois também tem o primeiro nível com um ponto e inserir o conteúdo.
Martin Eckleben
se eu adicionar font-weight: boldaos ol ol > li:beforecontadores da lista aninhada são, boldmas não faz os contadores da lista de primeiro nível bold?
Sushmit Sagar
14

Veja isso :

http://jsfiddle.net/PTbGc/

Seu problema parece ter sido corrigido.

O que aparece para mim (no 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

Como eu fiz isso

Ao invés de :

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

Faz :

<li>Item 1</li>
<li>Item 2
   <ol>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
   </ol>
</li>
Dr.Kameleon
fonte
7

Esta é uma otima soluçao! Com algumas regras CSS adicionais, você pode formatá-lo como uma lista de esboço do MS Word com um recuo da primeira linha deslocado:

OL { 
  counter-reset: item; 
}
LI { 
  display: block; 
}
LI:before { 
  content: counters(item, ".") "."; 
  counter-increment: item; 
  padding-right:10px; 
  margin-left:-20px;
}
ChaosFreak
fonte
2
O problema com essa abordagem é que você não pode copiar os números da lista. Então, se você copiar uma lista enorme, ela ficará sem números
Rohit
1

Eu encontrei um problema semelhante recentemente. A correção é definir a propriedade display dos itens li na lista ordenada para list-item, e não display block, e garantir que a propriedade display de ol não seja list-item. ie

li { display: list-item;}

Com isso, o analisador html vê todo li como o item da lista e atribui o valor apropriado a ele, e vê o ol, como um bloco embutido ou elemento de bloco com base em suas configurações, e não tenta atribuir qualquer valor de contagem para isto.

Babatunde Calebs
fonte
Isso duplica a numeração.
TylerH
0

A solução de Moshe é ótima, mas o problema ainda pode existir se você precisar colocar a lista dentro de a div. (leia: redefinição do contador CSS na lista aninhada )

Este estilo pode evitar esse 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>
Expandir snippet

Você também pode ativar a reconfiguração do contador li:before.

saboshi69
fonte
e se eu não quiser o final .da lista aninhada, mas a lista raiz?
Sushmit Sagar
0

Depois de passar por outras respostas, cheguei a esta, apenas aplique classe nested-counter-listà oltag raiz :

código 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;
      }
    }
  }
}

código 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>
Expandir snippet

E se você precisar seguir .no final dos contadores da lista aninhada, use isto:

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>
Expandir snippet

Sushmit Sagar
fonte