Lista uporządkowana HTML 1.1, 1.2 (liczniki zagnieżdżone i zakres) nie działa

88

Używam zagnieżdżonych liczników i zakresu, aby utworzyć uporządkowaną listę:

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>
Rozwiń fragment

Oczekuję następującego wyniku:

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

Zamiast tego widzę to (zła numeracja) :

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

Nie mam pojęcia, czy ktoś widzi, gdzie idzie źle?

Oto JSFiddle: http://jsfiddle.net/qGCUk/2/

html css html-lists sztylet
źródło

Odpowiedzi:

105

Odznacz "normalizuj CSS" - http://jsfiddle.net/qGCUk/3/ Reset CSS użyty w tym przypadku ustawia domyślne marginesy i dopełnienia listy na 0

ZAKTUALIZUJ http://jsfiddle.net/qGCUk/4/ - musisz uwzględnić swoje listy podrzędne w głównym<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>
Rozwiń fragment

Zoltan Toth
źródło
3
Jak sprawić, by po indeksie znajdował się punkt - jak 1.> 1.1. 1.2. 1.3.i tak dalej?
URL87
2
Po prostu upewnij się, że naprawiłeś selektory css, aby nie wpływały one na rzeczy takie jak listy nawigacyjne.
Okomikeruko
@Okomikeruko Co to znaczy „naprawić selektory css”? Ponieważ mam dokładnie ten problem, o którym wspomniałeś - ta sztuczka wpływa nie tylko na numerowaną listę, do której chcę jej użyć, ale także na inne listy w moim HTML. : - \ Nieważne: odpowiedź Moshe Simantov rozwiązuje ten problem. :)
antred Lutego
1
Atrybuty elementu @antred, takie jak idi, classpozwalają zdefiniować css specyficzne dla tych elementów z selektorami. Jeśli używasz koc li, ul, oletc, to css wpływa na wszystkie instancje niego. Ale jeśli ustawisz swój element na, <ol class="cleared">a selektor css na ol.cleared, nie wpłyniesz olniepotrzebnie na inne elementy.
Okomikeruko
64

Użyj tego stylu, aby zmienić tylko zagnieżdżone listy:

ol {
    counter-reset: item;
}

ol > li {
    counter-increment: item;
}

ol ol > li {
    display: block;
}

ol ol > li:before {
    content: counters(item, ".") ". ";
    margin-left: -20px;
}
Mosze Simantow
źródło
2
Świetny! U mnie zadziałało po wyjęciu z pudełka! Toda.
yO_
3
To najlepsza odpowiedź, ponieważ zawiera również pierwszy poziom z punktem i wstawką treści.
Martin Eckleben
jeśli dodam font-weight: bolddo ol ol > li:beforezagnieżdżonej listy, liczniki są, boldale nie tworzą liczników z listy pierwszego poziomu bold?
Sushmit Sagar
14

Sprawdź to :

http://jsfiddle.net/PTbGc/

Wygląda na to, że Twój problem został rozwiązany.

Co się pojawia (w Chrome i 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

Jak to zrobiłem

Zamiast :

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

Zrobić :

<li>Item 1</li>
<li>Item 2
   <ol>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
   </ol>
</li>
Dr Kameleon
źródło
7

To świetne rozwiązanie! Dzięki kilku dodatkowym regułom CSS możesz sformatować ją tak, jak listę konspektów MS Word z wiszącym wcięciem pierwszego wiersza:

OL { 
  counter-reset: item; 
}
LI { 
  display: block; 
}
LI:before { 
  content: counters(item, ".") "."; 
  counter-increment: item; 
  padding-right:10px; 
  margin-left:-20px;
}
ChaosFreak
źródło
2
Problem z tym podejściem polega na tym, że nie można skopiować numerów list. Więc jeśli skopiujesz ogromną listę, będzie ona bez liczb
Rohit
1

Niedawno napotkałem podobny problem. Rozwiązaniem jest ustawienie właściwości display elementów li na liście uporządkowanej na element listy, a nie blok wyświetlania, i upewnienie się, że właściwość display elementu ol nie jest elementem listy. to znaczy

li { display: list-item;}

Dzięki temu parser html widzi wszystkie li jako element listy i przypisuje do niego odpowiednią wartość, a także widzi ol jako element inline-block lub blok oparty na twoich ustawieniach i nie próbuje przypisywać żadnej wartości count do to.

Babatunde Calebs
źródło
To powiela numerację.
TylerH,
0

Rozwiązanie Mosze jest świetne, ale problem może nadal istnieć, jeśli chcesz umieścić listę w pliku div. (czytaj: resetowanie licznika CSS na zagnieżdżonej liście )

Ten styl może zapobiec temu problemowi:

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>
Rozwiń fragment

Możesz również włączyć resetowanie licznika li:before.

saboshi69
źródło
co się stanie, jeśli nie chcę końca .na liście zagnieżdżonej, ale na liście głównej?
Sushmit Sagar
0

Po przejrzeniu innych odpowiedzi wpadłem na to, po prostu zastosuj klasę nested-counter-listdo olznacznika głównego :

kod 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;
      }
    }
  }
}

kod 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>
Rozwiń fragment

A jeśli potrzebujesz .końca na końcu liczników listy zagnieżdżonej, użyj tego:

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>
Rozwiń fragment

Sushmit Sagar
źródło
0

Nie komplikuj!

Prostsze i standardowe rozwiązanie do zwiększania liczby i zachowania kropki na końcu. Nawet jeśli poprawnie uzyskasz css, nie zadziała, jeśli kod HTML nie jest poprawny. patrz poniżej.

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
        }
    }
}

Element nadrzędny HTML

Jeśli dodajesz dziecko, upewnij się, że znajduje się ono pod rodzicem 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
źródło