Simbol Peluru Tersuai sebagai Watak untuk
Memperibadikan simbol titik dalam senarai tidak tersusun (
) boleh dilakukan menggunakan CSS. Walaupun atribut imej gaya senarai membenarkan penggunaan grafik tersuai sebagai titik tumpu, ia mungkin tidak selalunya mudah. Artikel ini meneroka pendekatan alternatif untuk menentukan aksara biasa, seperti simbol ' ', sebagai simbol peluru.
Penyelesaian
Untuk mencapai simbol peluru tersuai menggunakan aksara biasa, ikut langkah ini:
-
Tetapkan semula senarai lalai gaya:
ul {
list-style: none;
margin-left: 0;
padding-left: 0;
}
Salin selepas log masuk
-
Buat lekukan untuk item senarai:
li {
padding-left: 1em;
text-indent: -1em;
}
Salin selepas log masuk
-
Tambah aksara tersuai yang diingini sebagai kandungan unsur pseudo:
li:before {
content: "+";
padding-right: 5px;
}
Salin selepas log masuk
Penjelasan
- Menetapkan semula gaya senarai lalai memastikan tiada margin awal atau padding, memberi anda kawalan ke atas penampilan senarai.
- Mengenden item senarai menggunakan padding-left dan text-indent menyediakan ruang untuk aksara tersuai sambil mengekalkan penjajaran item senarai.
- Li:before pseudo-element menambah aksara ' ' sebelum setiap item senarai.
Nota:
- Untuk melaraskan jarak antara simbol titik dan item senarai teks, ubah suai nilai padding-right dalam gaya li:before.
- Inden yang salah mungkin berlaku jika garisan membalut dalam item senarai. Laraskan nilai padding-left dan text-indent dengan sewajarnya.
Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggunakan Watak Tersuai sebagai Simbol Peluru untuk Elemen ``?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!