Daftar urutan HTML 1.1, 1.2 (Penghitung dan cakupan bersarang) tidak berfungsi

88

Saya menggunakan penghitung dan cakupan bersarang untuk membuat daftar berurutan:

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>
Luaskan cuplikan

Saya mengharapkan hasil sebagai berikut:

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

Sebaliknya, inilah yang saya lihat (penomoran salah) :

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

Saya tidak tahu, apakah ada yang melihat di mana kesalahannya?

Ini adalah JSFiddle: http://jsfiddle.net/qGCUk/2/

html css html-lists beladau
sumber

Jawaban:

105

Hapus centang "normalisasi CSS" - http://jsfiddle.net/qGCUk/3/ Penyetelan ulang CSS yang digunakan dalam pengaturan default semua margin daftar dan padding ke 0

UPDATE http://jsfiddle.net/qGCUk/4/ - Anda harus memasukkan sub-daftar Anda ke<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>
Luaskan cuplikan

Zoltan Toth
sumber
3
Bagaimana membuat indexnya diikuti dengan point - like 1.> 1.1. 1.2. 1.3.dan seterusnya?
URL87
2
Pastikan untuk memperbaiki pemilih css sehingga tidak memengaruhi hal-hal seperti daftar navigasi.
Okomikeruko
@Okomikeruko Apa yang dimaksud dengan "memperbaiki pemilih css"? Karena saya menjalankan masalah yang Anda singgung persis - trik ini tidak hanya memengaruhi daftar bernomor yang ingin saya gunakan, tetapi juga daftar lain di HTML saya. : - \ Nevermind: Jawaban Moshe Simantov memperbaikinya. :)
semut
1
Atribut elemen @antred menyukai iddan classmemungkinkan Anda menentukan css khusus untuk elemen tersebut dengan penyeleksi. Jika Anda menggunakan selimut li, ul, oldll, maka css mempengaruhi semua contoh itu. Namun jika Anda menyetel elemen ke <ol class="cleared">dan pemilih css ke ol.cleared, Anda tidak akan memengaruhi olelemen lain secara tidak perlu.
Okomikeruko
64

Gunakan gaya ini untuk hanya mengubah daftar bertingkat:

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
sumber
2
Bagus! Bekerja di luar kotak untuk saya! Toda.
yO_
3
Ini adalah jawaban terbaik karena juga memiliki level pertama dengan titik dan sisipkan konten.
Martin Eckleben
jika saya menambahkan font-weight: boldke ol ol > li:beforepenghitung daftar bersarang boldtetapi tidak membuat penghitung dari daftar tingkat pertama bold?
Sushmit Sagar
14

Lihat ini:

http://jsfiddle.net/PTbGc/

Masalah Anda sepertinya telah diperbaiki.

Yang muncul untuk saya (di bawah Chrome dan 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

Bagaimana saya melakukannya

Dari pada :

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

Lakukan:

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

Ini adalah solusi yang bagus! Dengan beberapa aturan CSS tambahan Anda dapat memformatnya seperti daftar garis besar MS Word dengan indentasi baris pertama yang menggantung:

OL { 
  counter-reset: item; 
}
LI { 
  display: block; 
}
LI:before { 
  content: counters(item, ".") "."; 
  counter-increment: item; 
  padding-right:10px; 
  margin-left:-20px;
}
ChaosFreak
sumber
2
Masalah dengan pendekatan ini adalah Anda tidak dapat menyalin nomor daftar. Jadi jika Anda menyalin daftar besar itu akan tanpa nomor
Rohit
1

Saya mengalami masalah serupa baru-baru ini. Cara mengatasinya adalah untuk menyetel properti tampilan dari item li dalam daftar terurut ke daftar-item, dan bukan blok tampilan, dan memastikan bahwa properti tampilan ol bukan daftar-item. yaitu

li { display: list-item;}

Dengan ini, parser html melihat semua li sebagai item daftar dan menetapkan nilai yang sesuai untuknya, dan melihat ol, sebagai elemen blok-sebaris atau blok berdasarkan pengaturan Anda, dan tidak mencoba untuk menetapkan nilai hitungan apa pun ke Itu.

Babatunde Calebs
sumber
Ini menggandakan penomoran.
TylerH
0

Solusi Moshe bagus tetapi masalahnya mungkin masih ada jika Anda perlu memasukkan daftar di dalam file div. (baca: CSS reset pada daftar bersarang )

Gaya ini dapat mencegah masalah itu:

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>
Luaskan cuplikan

Anda juga dapat mengatur counter-reset li:before.

saboshi69
sumber
bagaimana jika saya tidak ingin trailing .di daftar bersarang tetapi daftar root?
Sushmit Sagar
0

Setelah melalui jawaban lain, saya menemukan ini, cukup terapkan kelas nested-counter-listke oltag root :

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

kode 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>
Luaskan cuplikan

Dan jika Anda membutuhkan trailing .di akhir penghitung daftar bersarang, gunakan ini:

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>
Luaskan cuplikan

Sushmit Sagar
sumber
0

Tetap Sederhana!

Solusi sederhana dan standar untuk menambah angka dan mempertahankan titik di akhir. Meskipun Anda menggunakan css dengan benar, itu tidak akan berfungsi jika HTML Anda tidak benar. Lihat di bawah.

CSS

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

KELANCANGAN

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

HTML Parent Child

Jika Anda menambahkan anak, pastikan itu di bawah induk 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
sumber