Bagaimana untuk Menggantikan Bulet Senarai HTML dengan Simbol Dash?

Menyesuaikan Gaya Senarai dalam HTML dengan Simbol Dash

Dalam HTML, gaya senarai lalai dipaparkan sebagai cakera atau segi empat sama, tetapi anda mungkin ingin menyesuaikan titik peluru dengan simbol sempang. Untuk mencapai matlamat ini, anda boleh memanfaatkan CSS untuk mengubah suai penampilan senarai.

Menggunakan Kelas Pseudo :before

Satu pendekatan melibatkan penggunaan kelas pseudo :before untuk memasukkan sempang sebelum setiap item senarai. Teknik ini membolehkan anda mengekalkan lekukan senarai standard sambil menambah sengkang. Walau bagaimanapun, pendekatan ini mungkin memperkenalkan potensi isu keserasian merentas penyemak imbas yang berbeza disebabkan oleh variasi dalam sokongan CSS.

Menggabungkan jenis gaya senarai dengan inden teks

Lebih dipercayai penyelesaiannya ialah menggunakan senarai-style-type: tiada untuk mengalih keluar titik lalai dan kemudian menetapkan teks-inden kepada nilai negatif untuk mengekalkan kesan senarai inden. Selain itu, anda boleh menggunakan :before untuk memasukkan simbol sempang, memastikan pemaparan yang konsisten merentas penyemak imbas.

Kod Contoh

<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 dan Output

Dalam HTML anda, anda boleh menggunakan kelas putus-putus pada senarai tidak tersusun (

):

<code class="html">Some text
<ul class="dashed">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
Last text</code>

Salin selepas log masuk

Ini akan menghasilkan senarai tersuai dengan sempang sebagai titik peluru sambil mengekalkan lekukan senarai:

• Pertama
• Kedua
• Ketiga

• Pertama

  • Kedua
  • Ketiga

Kaedah ini serasi merentas penyemak imbas dan berkesan menggantikan gaya senarai lalai dengan sempang tersuai.

Atas ialah kandungan terperinci Bagaimana untuk Menggantikan Bulet Senarai HTML dengan Simbol Dash?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!