Saya menyadari seseorang dapat menentukan grafik khusus untuk menjadi karakter peluru pengganti, menggunakan atribut CSS:
list-style-image
Dan kemudian memberikannya URL.
Namun, dalam kasus saya, saya hanya ingin menggunakan simbol '+'. Saya tidak ingin harus membuat grafik untuk itu dan kemudian menunjukkannya. Saya lebih suka menginstruksikan daftar tidak berurutan untuk menggunakan simbol plus sebagai simbol peluru.
Bisakah ini dilakukan atau saya terpaksa membuatnya menjadi grafik terlebih dahulu?
sumber
Ini adalah jawaban yang terlambat, tetapi saya baru saja menemukan ini ... Untuk mendapatkan indentasi yang benar pada setiap baris yang membungkus, coba cara ini:
sumber
text-indent: -2ch
untuk menghitung tanda + dan spasi setelahnya, lalupadding-right: 1ch
menambahkan spasi itu. Tetap saja, +1 yang besar.Begitu banyak solusi.
Tapi saya masih berpikir masih ada ruang untuk perbaikan.
Keuntungan:
(tidak ada nilai piksel absolut yang terkandung)
(tidak ada sedikit pergeseran antara baris pertama dan baris berikutnya)
sumber
content: url('link-to-my-asset.svg');
dan mengatur lebar dan bantalan gambar antara peluru dan konten. Terima kasih!Ini adalah solusi W3C. Berfungsi di Firefox dan Chrome.
http://dev.w3.org/csswg/css-lists/#marker-content
sumber
li:before {content:"…";}
digunakan tanpa lekukan dan perataan lain.Inilah solusi terbaik yang saya temukan sejauh ini. Ini berfungsi dengan baik dan lintas-browser (IE 8+).
Yang penting adalah memiliki karakter dalam blok mengambang dengan lebar tetap sehingga teks tetap sejajar jika terlalu panjang untuk muat dalam satu baris. 1.2em adalah lebar yang Anda inginkan untuk karakter Anda, ubah sesuai kebutuhan Anda.
sumber
float
lagi? ... naah.Anda dapat menggunakan
:before
pseudo-selector untuk menyisipkan konten di depan item daftar. Anda dapat menemukan contoh di Quirksmode, di http://www.quirksmode.org/css/beforeafter.html . Saya menggunakan ini untuk memasukkan kutipan besar di sekitar blockquote ...HTH.
sumber
Solusi saya menggunakan pemosisian untuk mendapatkan garis yang dibungkus secara otomatis berbaris dengan benar. Jadi Anda tidak perlu khawatir tentang pengaturan padding-tepat pada li: sebelumnya.
sumber
Sebaiknya penataan gaya agar memenuhi syarat
<li>
agar tidak memengaruhi<ol>
item daftar. Begitu:sumber
Font-awesome memberikan solusi hebat di luar kotak:
sumber
sumber
Gaya tanda pisah:
sumber
Saya lebih suka menggunakan margin negatif, memberi Anda lebih banyak kendali
sumber
Yang cukup menarik, saya tidak menganggap salah satu solusi yang diposting cukup baik, karena mereka bergantung pada fakta bahwa karakter yang digunakan lebar 1em, yang tidak perlu begitu (dengan pengecualian jawaban John Magnolia yang bagaimanapun menggunakan pelampung yang dapat mempersulit hal-hal dengan cara lain). Inilah usaha saya:
Ini memiliki keunggulan berikut (dibandingkan solusi lain):
text-align: center;
dengan apa pun yang Anda sukai. Misalnya Anda dapat mencobacolor: red; text-align: right; padding-right: 5px; box-sizing: border-box;
atau jika Anda tidak suka bermain dengan border-box, kurangi padding (5px) dari width (misal: width: 25px dalam contoh ini). Ada banyak pilihan.Nikmati.
sumber
sumber
!important
, yang sangat penting untuk membuat CSS khusus saya di Blogspot berfungsicoba ini
sumber