Html sıralı liste 1.1, 1.2 (İç içe geçmiş sayaçlar ve kapsam) çalışmıyor

88

Sıralı bir liste oluşturmak için iç içe geçmiş sayaçları ve kapsamı kullanıyorum:

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>
Snippet'i genişlet

Şu sonucu bekliyorum:

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

Bunun yerine, gördüğüm şey bu (yanlış numaralandırma) :

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

Hiçbir fikrim yok, nerede yanlış gittiğini gören var mı?

İşte bir JSFiddle: http://jsfiddle.net/qGCUk/2/

html  css  html-lists 
— dirk
kaynak

Yanıtlar:

105

"CSS'yi normalleştir" seçeneğinin işaretini kaldırın - http://jsfiddle.net/qGCUk/3/ Burada kullanılan CSS sıfırlaması, varsayılan olarak tüm liste kenar boşluklarını ve dolguları 0'a getirir

GÜNCELLEME http://jsfiddle.net/qGCUk/4/ - alt listelerinizi ana sayfanıza eklemelisiniz<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>
Snippet'i genişlet

— Zoltan Toth
kaynak
3
İndekslerini nokta benzeri 1.> 1.1. 1.2. 1.3.vb. İle nasıl takip edebilirim?
— URL87
2
Navigasyon listeleri gibi şeyleri etkilememesi için css seçicilerini düzelttiğinizden emin olun.
— Okomikeruko
@Okomikeruko "CSS seçicilerini düzeltmek" ne anlama geliyor? Çünkü tam olarak bahsettiğiniz problemle çalışıyorum - bu numara sadece onu kullanmak istediğim numaralı listeyi değil, HTML'mdeki diğer listeleri de etkiliyor. : - \ Nevermind: Moshe Simantov'un cevabı bunu düzeltir. :)
— 2020
1
@antred eleman öznitelikleri gibi idve classseçicilerle bu elemanlara özel css tanımlamanıza izin verir. Eğer bir battaniye kullanıyorsanız li, ul, olvb, sonra css bunun tüm örneklerini etkiler. Ancak <ol class="cleared">öğenizi olarak ve css seçicinizi olarak ayarlarsanız, ol.cleareddiğer olöğeleri gereksiz yere etkilemezsiniz .
— Okomikeruko
64

Yalnızca iç içe geçmiş listeleri değiştirmek için bu stili kullanın:

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
kaynak
2
Harika! Benim için kutudan çıktı! Toda.
— yO_
3
Bu, aynı zamanda bir noktaya sahip birinci seviyeye sahip olduğu ve içeriği eklediği için en iyi cevaptır.
— Martin Eckleben
Ben eklerseniz font-weight: boldiçin ol ol > li:beforeiç içe geçmiş listenin sayaçlar vardır boldama ilk seviye listesinin sayaçları yapmaz bold?
— Sushmit Sagar
14

Şuna bir bak:

http://jsfiddle.net/PTbGc/

Sorununuz çözülmüş görünüyor.

Benim için ne görünüyor (Chrome ve Mac OS X altında)

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

Nasıl yaptım

Onun yerine :

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

Yapmak :

<li>Item 1</li>
<li>Item 2
   <ol>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
   </ol>
</li>
— Dr bukalemun
kaynak
7

Bu harika bir çözüm! Birkaç ek CSS kuralıyla, ilk satırda asılı bir girintiye sahip bir MS Word anahat listesi gibi biçimlendirebilirsiniz:

OL { 
  counter-reset: item; 
}
LI { 
  display: block; 
}
LI:before { 
  content: counters(item, ".") "."; 
  counter-increment: item; 
  padding-right:10px; 
  margin-left:-20px;
}
— ChaosFreak
kaynak
2
Bu yaklaşımla ilgili sorun, liste numaralarını kopyalayamamanızdır. Yani büyük bir listeyi kopyalarsanız sayılar olmayacak
— Rohit
1

Yakın zamanda benzer bir sorunla karşılaştım. Düzeltme, sıralı listedeki li öğelerinin display özelliğini list-item olarak ayarlamak, bloğu görüntülemek değil ve ol öğesinin display özelliğinin list-item olmamasını sağlamaktır. yani

li { display: list-item;}

Bununla, html ayrıştırıcısı tüm li'yi liste öğesi olarak görür ve ona uygun değeri atar ve ol'u ayarlarınıza bağlı olarak bir satır içi blok veya blok öğesi olarak görür ve herhangi bir sayım değeri atamaya çalışmaz. o.

— Babatunde Calebs
kaynak
Bu, numaralandırmayı kopyalar.
— TylerH
0

Moshe'nin çözümü harika ama listeyi bir div. (okuyun: İç içe geçmiş listede CSS karşı sıfırlama )

Bu tarz bu sorunu önleyebilir:

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>
Snippet'i genişlet

Ayrıca karşı sıfırlamayı da açabilirsiniz li:before.

— Saboshi69
kaynak
ya sondaki .iç içe listeyi değil de kök listeyi istiyorsam?
— Sushmit Sagar
0

Diğer cevapları inceledikten sonra bunu buldum, sadece sınıfı nested-counter-listkök oletikete uygulayın:

sass kodu:

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

css kodu :

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>
Snippet'i genişlet

.İç içe geçmiş listenin sayaçlarının sonuna ihtiyacınız varsa bunu kullanın:

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>
Snippet'i genişlet

— Sushmit Sagar
kaynak
0

Basit Tutun!

Numarayı artırmak ve sonunda noktayı korumak için daha basit ve Standart bir çözüm. CSS'yi doğru alsanız bile, HTML'niz doğru değilse çalışmayacaktır. aşağıya bakınız.

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

HTML Ebeveyn Alt

Çocuğu eklerseniz, ebeveynin altında olduğundan emin olun 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
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.