Bisakah daftar pesanan menghasilkan hasil yang terlihat seperti 1.1, 1.2, 1.3 (bukan hanya 1, 2, 3, ...) dengan css?

201

Dapatkah daftar yang dipesan menghasilkan hasil yang terlihat seperti 1.1, 1.2, 1.3 (bukan hanya 1, 2, 3, ...) dengan CSS? Sejauh ini, menggunakan list-style-type:decimalhanya menghasilkan 1, 2, 3, bukan 1.1, 1.2., 1.3.

html css

— Richard77
sumber

Saya sarankan untuk membandingkan jawaban yang diterima dengan itu oleh Jakub Jirutka. Saya pikir yang terakhir ini jauh lebih baik.

— Frank Conijn

Solusi elegan. Adakah yang tahu mengapa Wikipedia menggunakan ul untuk bagian kontennya alih-alih ini?

— Mattypants

1

@ davnicwil Saya setuju; Sepertinya saya mungkin baru saja menerapkan duplikat dalam urutan yang salah pada bulan September.

— TylerH

Keren, sekarang aku merasa canggung karena tidak pernah terpikir olehku itu bisa menjadi kesalahan sederhana seperti itu - permintaan maaf!

— davnicwil

289

Anda dapat menggunakan penghitung untuk melakukannya:

Nomor style sheet berikut menyarungkan item daftar sebagai "1", "1.1", "1.1.1", dll.
OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }

Contoh

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

<ol>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
  <li>li element</li>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
</ol>

Luaskan cuplikan

Lihat Penghitung bersarang dan ruang lingkup untuk informasi lebih lanjut.

— Gumbo
sumber

2

jawaban yang bagus Apa dukungan untuk ini?

— Jason McCreary

1

@Jason McCreary: Ya, itu sisi buruknya : Penghitung tidak didukung di IE sampai versi 8 .

— Gumbo

3

Solusi ini melewatkan satu hal kecil: titik yang mengikuti nomor item. Itu tidak terlihat seperti gaya daftar standar. Perbaiki dengan menambahkan titik pada aturan untuk li:before: content: counters(item, ".")". ";

— LS

4

Ini jawaban yang buruk. Itu tidak berfungsi dengan baik. Lihatlah jawabannya oleh Jakub Jirutka di bawah ini

— Tn. Pablo

1

@ Gumbo saya tahu, dan jawaban oleh Jakub memberi saya penomoran yang benar.

— Tuan Pablo

236

Tidak ada solusi di halaman ini yang berfungsi dengan benar dan universal untuk semua level dan paragraf panjang (terbungkus). Sangat sulit untuk mencapai lekukan yang konsisten karena ukuran variabel marker (1., 1.2, 1.10, 1.10.5, ...); itu tidak bisa hanya "dipalsukan," bahkan dengan margin / padding yang sudah ditentukan sebelumnya untuk setiap tingkat indentasi yang mungkin.

Saya akhirnya menemukan solusi yang benar - benar berfungsi dan tidak memerlukan JavaScript.

Ini diuji pada Firefox 32, Chromium 37, IE 9 dan Browser Android. Tidak berfungsi pada IE 7 dan sebelumnya.

CSS:

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

ol > li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;    
}

li ol > li {
  margin: 0;
}

li ol > li:before {
  content: counters(item, ".") " ";
}

Contoh:

Cobalah di JSFiddle , garpu di Gist .

— Jakub Jirutka
sumber

1

Pekerjaan bagus untuk mencapai jenis indensi ini. Namun saya masih akan berdebat bahwa 2 kasus lekukan pertama yang Anda daftarkan adalah masalah preferensi daripada benar dan salah. Pertimbangkan case 1 dan case 2 - yang terakhir berhasil menekan lebih banyak level sebelum jarak menjadi sulit, sambil tetap terlihat cukup rapi. Lebih jauh, MS Word dan gaya browser default menggunakan indentasi case 2. Saya kira mereka juga salah melakukannya?

— Saul Fautley

2

@ saul-fautley Itu salah dalam hal tipografi. Contoh Anda dengan jumlah nested level gila menunjukkan bahwa penomoran nested tidak cocok untuk level terlalu banyak, tapi itu cukup jelas. MS Words bukan sistem penyusunan huruf, ini hanya pengolah dokumen dengan tipografi yang buruk. Gaya peramban default ... oh, Anda tidak tahu banyak tentang tipografi, bukan?

— Jakub Jirutka

3

Ini benar-benar bekerja (secara teknis) untuk semua level dan paragraf panjang. Jika masuk akal untuk menggunakan selusin level, itu pertanyaan lain yang tidak ada hubungannya dengan solusi teknis. Intinya adalah bahwa Anda tidak harus menentukan aturan CSS untuk setiap tingkat bersarang seperti dengan beberapa solusi lainnya.

— Jakub Jirutka

4

Meskipun saya tidak akan mengatakan ada sesuatu yang secara inheren "salah" dengan jawaban lain, saya akan mengatakan mereka tidak lengkap. Jawaban ini tepat, dan bahkan bekerja di situs bergaya aneh yang saya amandemen.

— DanielM

2

@tremby: Perbedaan ini dapat diselesaikan dengan membuat li menggunakan "display: table-row" alih-alih "display: table". Masalah yang ditimbulkannya adalah bahwa li tidak dapat menggunakan margin / paddings karena table-rows selalu diukur secara otomatis berdasarkan kontennya. Ini dapat dikerjakan dengan menambahkan "li: setelah" dengan "display: block". Lihat jsFiddle untuk contoh lengkap. Sebagai bonus tambahan saya menambahkan "text-align: right" to "li: before" untuk membuat angka benar rata.

— mmlr

64

Jawaban yang dipilih adalah awal yang baik, tetapi pada dasarnya memaksa list-style-position: inside;gaya pada item daftar, membuat teks yang dibungkus sulit dibaca. Berikut adalah solusi sederhana yang juga memberikan kontrol atas margin antara angka dan teks, dan meluruskan angka sesuai dengan perilaku default.

ol {
    counter-reset: item;
}
ol li {
    display: block;
    position: relative;
}
ol li:before {
    content: counters(item, ".")".";
    counter-increment: item;
    position: absolute;
    margin-right: 100%;
    right: 10px; /* space between number and text */
}

JSFiddle: http://jsfiddle.net/3J4Bu/

— Saul Fautley
sumber

Satu kelemahan adalah menambahkan periode ke akhir setiap item daftar.

— Davin Studer

3

@Davin Studer: Ini hanya menambahkan periode ke akhir setiap angka, sesuai olperilaku default . Ini dapat dengan mudah dihapus dengan menghapus yang terakhir "."dari contentproperti, tetapi ini hanya terlihat agak aneh bagi saya.

— Saul Fautley

14

Solusi yang diposting di sini tidak bekerja dengan baik untuk saya, jadi saya melakukan campuran dari pertanyaan ini dan pertanyaan berikut: Apakah mungkin untuk membuat daftar pesanan multi-level dalam HTML?

/* Numbered lists like 1, 1.1, 2.2.1... */
ol li {display:block;} /* hide original list counter */
ol > li:first-child {counter-reset: item;} /* reset counter */
ol > li {counter-increment: item; position: relative;} /* increment counter */
ol > li:before {content:counters(item, ".") ". "; position: absolute; margin-right: 100%; right: 10px;} /* print counter */

Hasil:

tangkapan layar

Catatan: tangkapan layar, jika Anda ingin melihat kode sumber atau apa pun dari pos ini: http://estiloasertivo.blogspot.com.es/2014/08/introduccion-running-lean-y-lean.html

— chelder
sumber

1

Ini adalah jawaban kerja terbaik (dan paling sederhana) dari seluruh halaman.

— Bruno Toffolo

6

Catatan: Gunakan CSS untuk membuat penomoran bersarang di peramban modern. Lihat jawaban yang diterima. Berikut ini hanya untuk kepentingan historis.counters

Jika browser mendukung contentdan counter,

.foo {
  counter-reset: foo;
}
.foo li {
  list-style-type: none;
}
.foo li::before {
  counter-increment: foo;
  content: "1." counter(foo) " ";
}

<ol class="foo">
  <li>uno</li>
  <li>dos</li>
  <li>tres</li>
  <li>cuatro</li>
</ol>

Luaskan cuplikan

— kennytm
sumber

Solusi ini gagal total ketika daftar bersarang.

— LS

@ LS Anda selalu dapat mengakomodasi penyeleksi yang sesuai dengan kebutuhan Anda. .foo > ol > li.

— kennytm

1

Maksud saya adalah bahwa Anda telah membuat kode "1." ke dalam gaya. Apa yang terjadi ketika sublist adalah anak dari item kedua dalam daftar induk? Anda ingin muncul sebagai "2.", tetapi akan selalu menjadi "1." karena cara kode di sini. Apa solusinya? Membuat set gaya baru untuk setiap angka yang mungkin? Tidak. Gunakan counters()fungsi seperti pada contoh di atas alih-alih counter()fungsi.

— LS

2

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="author" content="Sandro Alvares - KingRider">
    </head>
    <body>
        <style type="text/css">
            li.title { 
                font-size: 20px; 
                font-weight: lighter; 
                padding: 15px; 
                counter-increment: ordem; 
            }
            .foo { 
                counter-reset: foo; 
                padding-left: 15px; 
            }
            .foo li { 
                list-style-type: none; 
            }
            .foo li:before { 
                counter-increment: foo; 
                content: counter(ordem) "." counter(foo) " "; 
            }
        </style>
        <ol>
            <li class="title">TITLE ONE</li>
            <ol class="foo">
                <li>text 1 one</li>
                <li>text 1 two</li>
                <li>text 1 three</li>
                <li>text 1 four</li>
            </ol>
            <li class="title">TITLE TWO</li>
            <ol class="foo">
                <li>text 2 one</li>
                <li>text 2 two</li>
                <li>text 2 three</li>
                <li>text 2 four</li>
            </ol>
            <li class="title">TITLE THREE</li>
            <ol class="foo">
                <li>text 3 one</li>
                <li>text 3 two</li>
                <li>text 3 three</li>
                <li>text 3 four</li>
            </ol>
        </ol>
    </body>
</html>

Hasil: http://i.stack.imgur.com/78bN8.jpg

— KingRider
sumber

2

Saya memiliki beberapa masalah ketika ada dua daftar dan yang kedua ada di dalam DIV. Daftar kedua harus mulai dari 1. bukan 2.1

<ol>
    <li>lorem</li>
    <li>lorem ipsum</li>
</ol>

<div>
    <ol>
        <li>lorem (should be 1.)</li>
        <li>lorem ipsum ( should be 2.)</li>
    </ol>
</div>

http://jsfiddle.net/3J4Bu/364/

EDIT: Saya memecahkan masalah dengan ini http://jsfiddle.net/hy5f6161/

— robertad
sumber

1

Dalam waktu dekat Anda mungkin dapat menggunakan ::markerelemen psuedo untuk mencapai hasil yang sama dengan solusi lain hanya dalam satu baris kode.

Ingatlah untuk memeriksa Tabel Kompatibilitas Browser karena ini masih merupakan teknologi eksperimental. Saat ini hanya menulis Firefox dan Firefox untuk Android, mulai dari versi 68, mendukung ini.

Berikut ini cuplikan yang akan ditampilkan dengan benar jika dicoba di peramban yang kompatibel:

::marker { content: counters(list-item,'.') ':' }
li { padding-left: 0.5em }

<ol>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
  <li>li element</li>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
</ol>

Luaskan cuplikan

Anda mungkin juga ingin memeriksa artikel hebat ini dengan menghancurkan majalah tentang topik ini.

— tyrion
sumber

0

Saya perlu menambahkan ini ke solusi yang diposting di 12 karena saya menggunakan daftar dengan campuran daftar daftar dan komponen daftar tidak terurut. konten: no-close-quote sepertinya aneh untuk ditambahkan, saya tahu, tapi berhasil ...

ol ul li:before {
    content: no-close-quote;
    counter-increment: none;
    display: list-item;
    margin-right: 100%;
    position: absolute;
    right: 10px;
}

— benjarlett
sumber

0

Berikut ini bekerja untuk saya:

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

ol > li:before {
  content: counters(item, ".") ") ";
  display: table-cell;
  padding-right: 0.6em;
}

li ol > li {
  margin: 0;
}

li ol > li:before {
  content: counters(item, ".") ") ";
}

Lihatlah: http://jsfiddle.net/rLebz84u/2/

atau yang ini http://jsfiddle.net/rLebz84u/3/ dengan lebih banyak teks yang dibenarkan

— willy wonka
sumber

Buang-buang waktu untuk melihat. Hampir identik dengan jawaban sebelumnya. Hanya perbedaannya adalah ")" telah ditambahkan ke ujung marker.

— juanitogan

0

ini adalah kode yang tepat jika Anda ingin mengubah ukuran anak pertama dari css lainnya.

<style>
    li.title { 
        font-size: 20px; 

        counter-increment: ordem; 
        color:#0080B0;
    }
    .my_ol_class { 
        counter-reset: my_ol_class; 
        padding-left: 30px !important; 
    }
    .my_ol_class li { 
          display: block;
        position: relative;

    }
    .my_ol_class li:before { 
        counter-increment: my_ol_class; 
        content: counter(ordem) "." counter(my_ol_class) " "; 
        position: absolute;
        margin-right: 100%;
        right: 10px; /* space between number and text */
    }
    li.title ol li{
         font-size: 15px;
         color:#5E5E5E;
    }
</style>

dalam file html.

        <ol>
            <li class="title"> <p class="page-header list_title">Acceptance of Terms. </p>
                <ol class="my_ol_class">
                    <li> 
                        <p>
                            my text 1.
                        </p>
                    </li>
                    <li>
                        <p>
                            my text 2.
                        </p>
                    </li>
                </ol>
            </li>
        </ol>

— sandeep kumar
sumber