Cara Membuat Senarai Bergaya Dash dalam HTML: Melampaui Gaya Bullet Lalai?

Penyesuaian Gaya Senarai HTML: Mencipta Senarai dengan Sempang

Dalam HTML, sifat jenis gaya senarai digunakan untuk menentukan gaya titik bagi item senarai. Walau bagaimanapun, ia tidak menyokong sempang secara asli sebagai aksara titik.

Menggunakan :before Kelas Pseudo

Satu pendekatan untuk mencipta senarai gaya sempang ialah menggunakan kelas pseudo :before. Ini membolehkan anda memasukkan kandungan sebelum setiap item senarai dan menggayakannya secara bebas.

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

Sifat kandungan memasukkan tanda sempang "-" sebelum setiap li, dan jidar-kanan menyediakan sedikit ruang antara sempang dan senarai teks item.

Menggunakan inden teks

Untuk mengekalkan kesan senarai inden semasa menggunakan kelas pseudo :before, anda boleh menggunakan inden teks negatif pada item senarai.

<code class="css">ul.dashed > li {
  text-indent: -5px;
}</code>

Ini menentang lekukan lalai yang dibuat oleh penggayaan titik, menjajarkan sempang dengan permulaan teks item senarai.

Penyesuaian Aksara Senarai Generik

Untuk menggunakan aksara generik sebagai senarai bullet, anda hanya boleh menentukannya dalam sifat jenis gaya senarai, seperti:

<code class="css">ul.generic {
  list-style-type: disc;
}

ul.square {
  list-style-type: square;
}

ul.circle {
  list-style-type: circle;
}</code>

Ini membolehkan anda membuat senarai dengan bentuk titik tumpu yang berbeza dan menyesuaikan penampilan visual senarai anda mengikut keperluan.

Atas ialah kandungan terperinci Cara Membuat Senarai Bergaya Dash dalam HTML: Melampaui Gaya Bullet Lalai?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!