Bagaimana Anda dapat menyesuaikan nomor dalam daftar yang dipesan?

109

Bagaimana cara meratakan kiri angka dalam daftar berurutan?

1.  an item
// skip some items for brevity 
9.  another item
10. notice the 1 is under the 9, and the item contents also line up

Ubah karakter setelah nomor dalam daftar dipesan?

1) an item

Juga apakah ada solusi CSS untuk mengubah dari angka ke daftar alfabet / romawi daripada menggunakan atribut type pada elemen ol.

Saya sangat tertarik dengan jawaban yang berfungsi di Firefox 3.

html css html-lists roman-numerals grom
sumber

Jawaban:

98

Ini adalah solusi yang saya miliki di Firefox 3, Opera dan Google Chrome. Daftar tersebut masih ditampilkan di IE7 (tetapi tanpa tanda kurung tutup dan angka rata kiri):

ol {
  counter-reset: item;
  margin-left: 0;
  padding-left: 0;
}
li {
  display: block;
  margin-bottom: .5em;
  margin-left: 2em;
}
li::before {
  display: inline-block;
  content: counter(item) ") ";
  counter-increment: item;
  width: 2em;
  margin-left: -2em;
}
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine<br>Items</li>
  <li>Ten<br>Items</li>
</ol>
Luaskan cuplikan

EDIT: Termasuk perbaikan beberapa baris oleh strager

Juga apakah ada solusi CSS untuk mengubah dari angka ke daftar alfabet / romawi daripada menggunakan atribut type pada elemen ol.

Lihat properti CSS tipe gaya daftar . Atau saat menggunakan penghitung, argumen kedua menerima nilai tipe gaya daftar. Misalnya, berikut ini akan menggunakan roman atas:

li::before {
  content: counter(item, upper-roman) ") ";
  counter-increment: item;
/* ... */
grom
sumber
Diperlukan untuk menambahkan nomor kembali, gaya global telah menghapusnya (siapa yang tahu mengapa Anda akan menggunakan ol dan menghapus nomor daripada ul ??). Jawaban sangat jelas +1 untuk penjelasan dan kode lengkap, dapat dengan mudah dimodifikasi untuk melakukan apa saja.
Morvael
Saya sarankan bersih CSS marjin / bantalan solusi, bahwa karya-karya yang lebih baik dengan daftar yang memiliki lebar penomoran: ol {counter-reset: item; padding-left: 0;} li {display: block; margin-bottom: .5em;} li:before {display: inline-block; content: counter(item) ") "; counter-increment: item; padding-right: 0.8em;}.
mmj
28

CSS untuk daftar gaya ada di sini , tetapi pada dasarnya:

li {
    list-style-type: decimal;
    list-style-position: inside;
}

Namun, tata letak spesifik yang Anda cari mungkin hanya dapat dicapai dengan mempelajari bagian dalam tata letak dengan sesuatu seperti ini (perhatikan bahwa saya belum benar-benar mencobanya):

ol { counter-reset: item }
li { display: block }
li:before { content: counter(item) ") "; counter-increment: item }
Marcus Downing
sumber
1
Ini membuat nomornya berbaris, tetapi konten teksnya tidak.
grom
13

Anda juga dapat menentukan nomor Anda sendiri di HTML - misalnya jika nomor tersebut disediakan oleh database:

ol {
  list-style: none;
}

ol>li:before {
  content: attr(seq) ". ";
}
<ol>
  <li seq="1">Item one</li>
  <li seq="20">Item twenty</li>
  <li seq="300">Item three hundred</li>
</ol>
Luaskan cuplikan

The seqatribut dibuat terlihat menggunakan metode yang sama dengan yang diberikan dalam jawaban lainnya. Tapi alih-alih menggunakan content: counter(foo), kami menggunakancontent: attr(seq) .

Demo di CodePen dengan lebih banyak gaya

z0r
sumber
7
Anda dapat menyederhanakan ini jika Anda hanya menggunakan valueatribut di <li>. mis <li value="20">. Maka Anda tidak membutuhkan elemen semu apa pun. Demo
GWB
1
@GWB Meskipun itu valid (dan solusi yang baik), ini terbatas pada nilai numerik karena daftarnya adalah ordinal. Karena itu, Anda tidak dapat melakukan sesuatu seperti itu value="4A", karena itu tidak akan berhasil. Selain itu, atribut nilai dapat berfungsi dengan typeatribut tersebut, tetapi nilai tetap harus berupa angka (karena berfungsi dalam set yang dipesan).
jedd.ahyoung
Terima kasih - ini berhasil untuk saya ketika saya membutuhkan Piring Terbang untuk menampilkan daftar dalam urutan terbalik ( reversedatribut hanya html5, seperti yang menggunakan valuethe li). Alih-alih menggunakan Anda, seqsaya menetapkan valuedan digunakan attr(value)sebagai gantiattr(seq)
jaygooby
8

Mencuri banyak ini dari jawaban lain, tetapi ini berfungsi di FF3 untuk saya. Ini memiliki upper-roman, indentasi seragam, braket dekat.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<style type="text/css">
<!--
ol {
  counter-reset: item;
  margin-left: 0;
  padding-left: 0;
}
li {
  margin-bottom: .5em;
}
li:before {
  display: inline-block;
  content: counter(item, upper-roman) ")";
  counter-increment: item;
  width: 3em;
}
-->
</style>
</head>

<body>
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine</li>
  <li>Ten</li>
</ol>
</body>
</html>
Steve Perks
sumber
5

Saya sarankan untuk bermain dengan atribut: before dan melihat apa yang dapat Anda capai dengannya. Ini berarti kode Anda benar-benar terbatas pada peramban baru yang bagus, dan mengecualikan bagian pasar (yang sangat besar) yang masih menggunakan peramban lama sampah,

Sesuatu seperti berikut ini, yang memaksa tetap pada item. Ya, saya tahu itu kurang elegan untuk memilih lebar sendiri, tetapi menggunakan CSS untuk tata letak Anda seperti pekerjaan polisi yang menyamar: betapapun bagusnya motif Anda, itu selalu menjadi berantakan.

li:before {
  content: counter(item) ") ";
  counter-increment: item;
  display: marker;
  width: 2em;
}

Tetapi Anda harus bereksperimen untuk menemukan solusi yang tepat.

Marcus Downing
sumber
Anda memerlukan counter-reset: item; sebelum blok itu.
Greg
5

Angka-angka berbaris lebih baik jika Anda menambahkan nol di depan ke angka-angka, dengan menyetel tipe-gaya-daftar ke:

ol { list-style-type: decimal-leading-zero; }
Peter Hilton
sumber
5

HTML5: Gunakan valueatribut (tidak perlu CSS)

Browser modern akan menafsirkan valueatribut tersebut dan akan menampilkannya seperti yang Anda harapkan. Lihat dokumentasi MDN .

<ol>
  <li value="3">This is item three.</li>
  <li value="50">This is item fifty.</li>
  <li value="100">This is item one hundred.</li>
</ol>
Luaskan cuplikan

Juga kita lihat dalam <ol>artikel tentang MDN , terutama dokumentasi untuk startdan atribut.

Flimm
sumber
4

Meminjam dan memperbaiki jawaban Marcus Downing . Diuji dan berfungsi di Firefox 3 dan Opera 9. Mendukung banyak baris juga.

ol {
    counter-reset: item;
    margin-left: 0;
    padding-left: 0;
}

li {
    display: block;
    margin-left: 3.5em;          /* Change with margin-left on li:before.  Must be -li:before::margin-left + li:before::padding-right.  (Causes indention for other lines.) */
}

li:before {
    content: counter(item) ")";  /* Change 'item' to 'item, upper-roman' or 'item, lower-roman' for upper- and lower-case roman, respectively. */
    counter-increment: item;
    display: inline-block;
    text-align: right;
    width: 3em;                  /* Must be the maximum width of your list's numbers, including the ')', for compatability (in case you use a fixed-width font, for example).  Will have to beef up if using roman. */
    padding-right: 0.5em;
    margin-left: -3.5em;         /* See li comments. */
}
strager
sumber
Anda juga ingin text-align: left; tidak benar. Dan baris terakhir harus margin-left: -3.5em;
grom
@ grom, Terima kasih atas koreksi emnya. Juga, Opera merender daftar rata kanan secara default, jadi saya meniru perilaku ini.
strager
@grom, Masalah Firefox adalah ... Firefox meletakkan li: sebelum pseudoelement pada barisnya sendiri tanpa float, bahkan jika itu adalah display: inline-block.
strager
@strager, Saya menggunakan 3.0.4 di Linux dan 3.0.3 di Windows, dan ini berfungsi untuk saya tanpa float: left; aturan.
grom
@grom, Hmm, menarik. Saya baru saja menguji diri saya sendiri, dan berhasil tanpa pelampung. Mungkin saya salah mengetik.
strager
2

Ada atribut Type yang memungkinkan Anda untuk mengubah gaya penomoran, namun Anda tidak dapat mengubah tanda titik setelah angka / huruf.

<ol type="a">
    <li>Turn left on Maple Street</li>
    <li>Turn right on Clover Court</li>
</ol>
GateKiller
sumber
Markup dalam jawaban ini perlu diperbaiki. Gunakan huruf kecil dan apit nilai atribut dalam "tanda kutip".
dylanfm
Dan tutup elemen Anda: <li> ... </li>.
dylanfm
@dylanfm - Anda tahu bahwa markup yang disajikan sesuai, 100% HTML valid, ya? Jangan meremehkan orang karena tidak menggunakan XHTML kecuali diminta XHTML.
Ben Blank
Saya tidak meremehkan Anda. Dan ya, itu benar kembali. HTML. Saya hanya menjadi orang yang pemilih standar.
dylanfm
Saya minta maaf karena memposting html yang tidak valid. Saya menyalin kode dari situs web dan tidak berpikir untuk memperbaikinya. Saya merasa malu sekarang :(
GateKiller
1

Dokumen mengatakan tentang list-style-position: outside

CSS1 tidak menentukan lokasi yang tepat dari kotak penanda dan untuk alasan kompatibilitas, CSS2 tetap sama ambigu. Untuk kontrol kotak penanda yang lebih tepat, gunakan penanda.

Lebih jauh ke atas halaman itu adalah hal-hal tentang penanda.

Salah satu contohnya adalah:

       LI:before { 
           display: marker;
           content: "(" counter(counter) ")";
           counter-increment: counter;
           width: 6em;
           text-align: center;
       }
Stephen Denne
sumber
Semua contoh (lihat w3.org/TR/CSS2/generate.html#q11 ) untuk penanda tidak berfungsi untuk saya.
grom
1

Tidak ... cukup gunakan DL:

dl { overflow:hidden; }
dt {
 float:left;
 clear: left;
 width:4em; /* adjust the width; make sure the total of both is 100% */
 text-align: right
}
dd {
 float:left;
 width:50%; /* adjust the width; make sure the total of both is 100% */
 margin: 0 0.5em;
}
William Entriken
sumber
0

Aku memilikinya. Coba yang berikut ini:

<html>
<head>
<style type='text/css'>

    ol { counter-reset: item; }

    li { display: block; }

    li:before { content: counter(item) ")"; counter-increment: item; 
        display: inline-block; width: 50px; }

</style>
</head>
<body>
<ol>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
</ol>
</body>

Masalahnya adalah ini pasti tidak akan berfungsi pada browser yang lebih lama atau kurang patuh: display: inline-blockini adalah properti yang sangat baru.

Marcus Downing
sumber
0

Solusi alternatif cepat dan kotor . Anda dapat menggunakan karakter tabulasi bersama dengan teks yang telah diformat sebelumnya. Berikut kemungkinannya:

<style type="text/css">
ol {
    list-style-position: inside;
}
li:first-letter {
    white-space: pre;
}
</style>

dan html Anda:

<ol>
<li>    an item</li>
<li>    another item</li>
...
</ol>

Perhatikan bahwa spasi antara litag dan awal teks adalah karakter tabulasi (yang Anda dapatkan saat Anda menekan tombol tab di dalam notepad).

Jika Anda perlu mendukung browser lama, Anda dapat melakukan ini sebagai gantinya:

<style type="text/css">
ol {
    list-style-position: inside;
}
</style>

<ol>
    <li><pre>   </pre>an item</li>
    <li><pre>   </pre>another item</li>
    ...
</ol>
Marco Luglio
sumber
0

Jawaban lain lebih baik dari sudut pandang konseptual. Namun, Anda bisa menggantinya dengan nomor yang sesuai dari '& ensp;' untuk membuat mereka berbaris.

* Catatan: Awalnya saya tidak menyadari bahwa daftar bernomor sedang digunakan. Saya pikir daftar itu dibuat secara eksplisit.

Metro
sumber
0

Saya akan memberikan di sini jenis jawaban yang biasanya tidak saya suka baca, tetapi saya pikir karena ada jawaban lain yang memberi tahu Anda cara mencapai apa yang Anda inginkan, mungkin menyenangkan untuk memikirkan kembali apakah yang Anda coba capai benar-benar sebuah ide bagus.

Pertama, Anda harus berpikir apakah sebaiknya menampilkan item dengan cara yang tidak standar, dengan karakter pemisah yang berbeda dari yang disediakan.

Saya tidak tahu alasannya, tapi anggap saja Anda punya alasan yang bagus.

Cara-cara yang diajukan di sini untuk mencapai yang terdiri dari menambahkan konten ke markup Anda, terutama melalui CSS: sebelum pseudoclass. Konten ini benar-benar mengubah struktur DOM Anda, menambahkan item itu ke dalamnya.

Saat Anda menggunakan penomoran "ol" standar, Anda akan memiliki konten yang dirender di mana teks "li" dapat dipilih, tetapi nomor sebelumnya tidak dapat dipilih. Artinya, sistem penomoran standar tampaknya lebih "hiasan" daripada konten nyata. Jika Anda menambahkan konten untuk angka menggunakan misalnya metode ": sebelum", konten ini akan dapat dipilih, dan terkait dengan ini, melakukan masalah vopy / paste yang tidak diinginkan, atau masalah aksesibilitas dengan pembaca layar yang akan membaca konten "baru" ini sebagai tambahan ke sistem penomoran standar.

Mungkin pendekatan lain dapat berupa gaya angka menggunakan gambar, meskipun alternatif ini akan membawa masalah sendiri (angka tidak ditampilkan saat gambar dinonaktifkan, ukuran teks untuk angka tidak berubah, ...).

Bagaimanapun, alasan jawaban ini bukan hanya untuk mengusulkan alternatif "gambar" ini, tetapi untuk membuat orang berpikir tentang konsekuensi mencoba mengubah sistem penomoran standar untuk daftar berurutan.

tomasofen.dll
sumber
0

Kode ini membuat gaya penomoran sama dengan header konten li.

<style>
    h4 {font-size: 18px}
    ol.list-h4 {counter-reset: item; padding-left:27px}
    ol.list-h4 > li {display: block}
    ol.list-h4 > li::before {display: block; position:absolute;  left:16px;  top:auto; content: counter(item)"."; counter-increment: item; font-size: 18px}
    ol.list-h4 > li > h4 {padding-top:3px}
</style>

<ol class="list-h4">
    <li>
        <h4>...</h4>
        <p>...</p> 
    </li>
    <li>...</li>
</ol>
Vlad Alivanov
sumber