Bagaimanakah Saya Boleh Mencipta Gaya Senarai Bergaris dalam HTML Tanpa Menggunakan Unsur Pseudo?

Menyesuaikan Gaya Senarai dengan Simbol Dash

Mencipta gaya senarai HTML dengan simbol sempang mungkin kelihatan seperti tugas yang mudah, tetapi ia boleh menimbulkan cabaran apabila menyasarkan penyelesaian yang lancar dan elegan. Anda mungkin mempertimbangkan penggunaan elemen pseudo seperti li:before { content: "-" };, tetapi mari kita teroka pendekatan yang lebih halus yang mengelakkan potensi kelemahan.

Mengintegrasikan Simbol Dash ke dalam Gaya Senarai

Untuk mencapai gaya senarai putus-putus dengan ketepatan, kami boleh melaksanakan langkah berikut:

1. Alih Keluar Penggayaan Lalai: Gunakan gaya senarai- jenis: tiada; kepada elemen ul yang disasarkan untuk menghapuskan sebarang gaya bulet yang dipratentukan.
2. Laksanakan Inden: Gunakan inden teks untuk mengekalkan kesan inden yang diingini untuk senarai. Kita boleh menetapkan nilai lekukan negatif untuk mengalihkan item senarai sedikit ke kiri, mewujudkan ilusi sempang.
3. Tambah Simbol Sempang: Gunakan elemen pseudo :before untuk memasukkan simbol sempang. Sifat kandungan boleh ditetapkan kepada "-" (untuk sempang ringkas) atau alternatif seperti "—" atau "–" untuk gaya sempang yang berbeza.

Penyelesaian Dipertingkat

Dengan menggabungkan langkah-langkah ini, kami boleh membuat senarai yang mempamerkan gaya putus-putus dengan kehalusan:

<code class="css">ul {
  margin: 0;
}
ul.dashed {
  list-style-type: none;
}
ul.dashed > li {
  text-indent: -5px;
}
ul.dashed > li:before {
  content: "-";
  text-indent: -5px;
}</code>

Penggunaan Aksara Generik

Prinsip yang digariskan di atas boleh digunakan untuk memaparkan sebarang aksara generik sebagai gaya senarai. Hanya gantikan simbol sempang "-" dengan aksara yang diingini dalam sifat kandungan unsur pseudo :before.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Gaya Senarai Bergaris dalam HTML Tanpa Menggunakan Unsur Pseudo?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!