Apakah mungkin untuk menentukan nomor awal untuk daftar yang dipesan?

115

Saya memiliki daftar yang dipesan di mana saya ingin nomor awal menjadi 6. Saya menemukan bahwa ini didukung (sekarang tidak digunakan lagi) di HTML 4.01. Dalam spesifikasi ini mereka mengatakan bahwa Anda dapat menentukan bilangan bulat awal dengan menggunakan CSS. (sebagai ganti startatribut)

Bagaimana Anda menentukan nomor awal dengan CSS?

html css html-lists vrish88
sumber

Jawaban:

148

Jika Anda memerlukan fungsionalitas untuk memulai daftar terurut (OL) pada titik tertentu, Anda harus menentukan doctype Anda sebagai HTML 5; yang mana:

<!doctype html>

Dengan doctype itu, sah untuk menyetel startatribut pada daftar yang dipesan. Seperti:

<ol start="6">
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
</ol>
Luaskan cuplikan

Travis
sumber
7
apakah ini masih akurat?
antony.trupe
3
Jawaban ini akurat menggunakan HTML5, ya.
Travis
Atribut start juga berfungsi untuk daftar yang tidak diurutkan (<ul>) seperti: <ul style = "list-style-type: lower-roman;" start = "4"> dan akan memulai daftar di 'iv' atau <ul style = "list-style-type: upper-alpha;" start = "4"> dimulai pada 'D'
Matthew Cox
66

<ol start="">tidak usang lagi di HTML5 , jadi saya akan terus menggunakannya, terlepas dari apa yang dikatakan HTML4.01.

Ms2ger.dll
sumber
32

start="number" menyebalkan karena tidak otomatis berubah berdasarkan penomoran sebelumnya.

Cara lain untuk melakukan ini yang mungkin sesuai dengan kebutuhan yang lebih rumit adalah dengan menggunakan counter-resetdan counter-increment.

Masalah

Katakanlah Anda menginginkan sesuatu seperti ini: 

1. Item one
2. Item two

Interruption from a <p> tag

3. Item three
4. Item four

Anda dapat menyetel start="3"pada sepertiga lidetik ol, tetapi sekarang Anda harus mengubahnya setiap kali Anda menambahkan item ke yang pertamaol

Larutan

Pertama, mari kita hapus format penomoran kita saat ini.

ol {
  list-style: none;
}

Kami akan meminta setiap li menunjukkan konter

ol li:before {
  counter-increment: mycounter;
  content: counter(mycounter) ". ";
}

Sekarang kita hanya perlu memastikan penghitung disetel ulang hanya pada yang pertama, olbukan masing-masing.

ol:first-of-type {
  counter-reset: mycounter;
}

Demo

http://codepen.io/ajkochanowicz/pen/mJeNwY

Sekarang saya dapat menambahkan sebanyak mungkin item ke salah satu daftar dan penomoran akan dipertahankan.

1. Item one
2. Item two
...
n. Item n

Interruption from a <p> tag

n+1. Item n+1
n+2. Item n+2
...
Adam Grant
sumber
Anda juga dapat menentukan nomor Anda sendiri secara eksplisit: stackoverflow.com/a/31823704/320036
z0r
2
ol li {...}seharusnya ol li:before {...} - jika tidak ini adalah solusi yang tepat, terima kasih!
Davor
15

Saya terkejut bahwa saya tidak dapat menemukan jawabannya di utas ini.

Saya sudah menemukan sumber ini , yang telah saya rangkum di bawah ini:

Untuk menyetel atribut start untuk daftar yang diurutkan menggunakan CSS, bukan HTML, Anda dapat menggunakan counter-incrementproperti sebagai berikut:

ol {
  list-style: none;
  counter-increment: start 3;
  }
li:before {
  content: counter(start, lower-alpha) ") ";
  counter-increment: start;
  }

counter-incrementtampaknya diindeks 0, jadi untuk mendapatkan daftar yang dimulai dari 4, gunakan 3.

Untuk HTML berikut

<ol>
  <li>Buy milk</li>
  <li>Feed the dog</li>
  <li>Drink coffee</li>
</ol>

Hasil saya adalah

d) Buy milk
e) Feed the dog
f) Drink coffee

Lihat biolaku

Lihat juga referensi wiki W3

hcmcf
sumber
1
Jawaban yang bagus. Ini telah menjadi penyelamat, terima kasih.
Andrea
9

Seperti yang disarankan orang lain, seseorang dapat menggunakan startatribut olelemen.

Sebagai alternatif, seseorang dapat menggunakan valueatribut lielemen. Kedua atribut tersebut ditandai sebagai usang di HTML 4.01 , tetapi tidak di HTML 5 ( oldan li).

<ol start="-2">
  <li>Alpha</li>
  <li>Beta</li>
  <li value="10">Gamma</li>
  <li>Delta</li>
</ol>
Luaskan cuplikan

Andrey
sumber
1

Memulai penomoran daftar berurutan pada nomor yang berbeda dari nilai default ("1") membutuhkan startatribut. Atribut ini diizinkan (tidak usang) dalam spesifikasi HTML 4.01 (HTML 4.01 belum menjadi "Spesifikasi yang Diganti" pada saat pertanyaan ini diposting) dan masih diizinkan dalam spesifikasi HTML 5.2 saat ini . The olelemen juga memiliki opsional startatribut di XHTML 1.0 ini transisi DTD tetapi tidak dalam XHTML 1.0 ini DTD ketat (mencari string ATTLIST oldan memeriksa daftar atribut). Jadi, terlepas dari apa yang dikatakan beberapa komentar lama, startatribut tersebut tidak digunakan lagi ; sebaliknya itu tidak validdalam DTD ketat HTML 4.01 dan XHTML 1.0. Terlepas dari apa yang diklaim oleh salah satu komentar, startatribut tersebut tidak diperbolehkan pada ulelemen tersebut dan saat ini tidak berfungsi di Firefox dan Chromium.

Perhatikan juga bahwa pemisah ribuan tidak berfungsi (di versi Firefox dan Chromium saat ini). Dalam potongan kode berikut, 10.000akan diartikan sebagai 10; hal yang sama berlaku untuk 10,000. Jadi jangan gunakan jenis counternilai berikut :

<ol start="10.000">
  <li>Item 10.000</li>
  <li>Next item</li>
  <li>Next item</li>
</ol>

Jadi yang harus Anda gunakan adalah yang berikut (dalam kasus yang jarang terjadi di mana nilai yang lebih tinggi dari 1000 sama sekali diperlukan):

<ol start="10000">
  <li>Item 10.000</li>
  <li>Next item</li>
  <li>Next item</li>
</ol>

Beberapa jawaban lain menyarankan penggunaan properti CSS counter, tetapi ini bertentangan dengan pemisahan tradisional konten dan tata letak (masing-masing dalam HTML dan CSS). Pengguna dengan gangguan penglihatan tertentu dapat menggunakan lembar gayanya sendiri, dan counternilainya mungkin hilang sebagai hasilnya. Dukungan pembaca layar counterjuga harus diuji. Dukungan pembaca layar untuk konten di CSS adalah fitur yang relatif baru dan perilaku tidak selalu konsisten. Lihat Pembaca Layar dan CSS: Apakah Kita Keluar dari Gaya (dan Menjadi Konten)? oleh John Northup di blog WebAIM (Agustus 2017).

Tsundoku
sumber
0

Jika daftar bersarang, harus ada penanganan yang meninggalkan item daftar bersarang, yang saya selesaikan dengan memverifikasi bahwa kakek nenek bukan item daftar.

var section = document.getElementById("TheContent");
var list = section.getElementsByTagName("li");
var cnt = 0;
for (var i=0;i<list.length;i++){
  if (list[i].parentElement.parentElement.nodeName!="LI") {
    cnt += 1;
    list[i].setAttribute("value",cnt);
  }
}
<!DOCTYPE html>
<html>
<body>

<section id="TheContent">
<h2>Ordered Lists - numbering not interupted</h2>
<p>This example avoids for the first list level that each ordered list starts with 1:</p>

<p><strong>1st list:</strong></p>
<ol>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ol>

<p><strong>2nd list:</strong></p>
<ol>
  <li>item</li>
  <li>item
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
  </li>
  <li>item</li>
</ol>
</section>

</body>
</html>
Luaskan cuplikan

LoonyNoob
sumber
0

Dengan CSS, agak sulit untuk menutupi kasus bahwa ada item daftar bertingkat, sehingga hanya tingkat daftar pertama yang mendapatkan penomoran khusus yang tidak mengganggu setiap daftar terurut baru. Saya menggunakan kombinator CSS '>' untuk menentukan kemungkinan jalur ke item daftar yang akan mendapatkan penomoran khusus. Lihat https://www.w3schools.com/css/css_combinators.asp

body {
  counter-reset: li_cnt;
}
/* discard auto generated numbers */
ol {
  list-style-type: none;
}
/* all possible paths to the list item that shall have custom numbering */
section#TheContent > ol > li:before,
body > ol > li:before {
  counter-increment: li_cnt;
  content: counter(li_cnt)'. '; /* add own numbers */
}
/* switch on default auto generated numbers for nested list items */
li > ol {
  list-style-type: decimal;
}
<!DOCTYPE html>
<html>
<body>

<section id="TheContent">
<h2>Ordered Lists - numbering not interupted</h2>
<p>This example avoids for the first list level that each ordered list starts with 1:</p>

<p><strong>1st list:</strong></p>
<ol>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ol>

<p><strong>2nd list:</strong></p>
<ol>
  <li>item</li>
  <li>item
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
  </li>
  <li>item</li>
</ol>
</section>

</body>
</html>
Luaskan cuplikan

LoonyNoob
sumber
-1

Jelas baik @start dari daftar terurut <ol> maupun @value dari item daftar <li> tidak dapat disetel melalui CSS. Lihat https://www.w3schools.com/css/css_list.asp

Mengganti penomoran dengan penghitung di CSS tampaknya menjadi solusi terbaik / tercepat / sangat mudah dan ada orang lain yang mempromosikannya, misalnya https://css-tricks.com/numbering-in-style/

Dengan JavaScript murni, dimungkinkan untuk menyetel @value dari setiap item daftar, tetapi ini tentu saja lebih lambat dari CSS. Bahkan tidak diperlukan untuk memeriksa apakah item daftar termasuk dalam daftar yang dipesan <ol>, karena daftar yang tidak berurutan akan ditinggalkan secara otomatis.

var section = document.getElementById("TheContent");
var list = section.getElementsByTagName("li");
for (var i=0; i<list.length; i++){
  if (list[i].parentElement.nodeName=="OL") {
    list[i].setAttribute("value",i+1);
  }
}
<!DOCTYPE html>
<html>
<body>

<section id="TheContent">
  <h2>Ordered Lists - numbering not interupted</h2>
  <p>This example avoid that each ordered list starts with 1:</p>

  <p><strong>1st list:</strong></p>
  <ol>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
  </ol>

  <p><strong>2nd list:</strong></p>
  <ol>
    <li>list item 4</li>
    <li>list item 5</li>
    <li>list item 6</li>
  </ol>
  </section>

</body>
</html>
Luaskan cuplikan

LoonyNoob
sumber