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 upUbah karakter setelah nomor dalam daftar dipesan?
1) an itemJuga 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.
Jawaban:
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>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;
/* ... */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;}.
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 }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>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) .
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).
reversedatribut hanya html5, seperti yang menggunakan valuethe li). Alih-alih menggunakan Anda, seqsaya menetapkan valuedan digunakan attr(value)sebagai gantiattr(seq)
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>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.
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; }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>Juga kita lihat dalam <ol>artikel tentang MDN , terutama dokumentasi untuk startdan atribut.
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. */
}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>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;
}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;
}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.
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>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.
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>