Bagaimana untuk mengalih keluar titik di hadapan item senarai li dalam css-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk mengalih keluar titik di hadapan item senarai li dalam css

PHPz

Lepaskan： 2023-04-21 11:53:29

asal

6200 orang telah melayarinya

Dalam pembangunan web, senarai sering digunakan, tetapi titik sebelum item senarai tidak diperlukan atau dikehendaki. Jadi bagaimana untuk membuangnya? Dalam artikel ini, kami akan menunjukkan kepada anda cara mengalih keluar titik di hadapan item senarai menggunakan CSS.

Dalam HTML, kami biasanya menggunakan teg

Andaikan kita mempunyai kod HTML berikut:

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

Salin selepas log masuk

Apabila anda menjalankan kod tersebut, anda akan melihat titik kecil di hadapan setiap baris.

Untuk mengalih keluar mata ini, kami boleh menggunakan CSS untuk mengawalnya. Di bawah ini kami akan memperkenalkan tiga kaedah.

Kaedah 1: Gunakan gaya senarai

gaya senarai ialah atribut yang digunakan untuk menetapkan gaya senarai. Ia boleh menetapkan glyph di hadapan item senarai. Kita boleh menetapkannya kepada tiada untuk mengalih keluar semua glyph. Berikut ialah pelaksanaan kod khusus:

ul {
  list-style: none;
}

Salin selepas log masuk

Menggunakan gaya senarai boleh menyelesaikan semua item senarai sekaligus, tetapi ia akan menjadi lebih menyusahkan jika kita perlu membuat tetapan khas untuk beberapa item senarai kemudian.

Kaedah 2: Gunakan elemen pseudo: sebelum

Terdapat elemen pseudo dalam CSS: sebelum, yang boleh menambah kandungan di hadapan elemen. Kita boleh menggunakan ini untuk mengalih keluar glyph dan menggantikannya dengan ruang. Berikut ialah pelaksanaan kod khusus:

ul li:before {
  content: " ";
}

Salin selepas log masuk

Kaedah ini secara relatifnya lebih fleksibel. Kita boleh menetapkan elemen li tertentu, tetapi perlu diingatkan bahawa kaedah ini hanya terpakai kepada senarai tidak tertib. Jika anda ingin mengalih keluar nombor atau huruf di hadapan senarai yang dipesan, anda memerlukan kaedah lain.

Kaedah 3: Gunakan teg perubahan

Kita boleh menukar teg senarai tidak tersusun

atau

, supaya bulatan kecil di hadapan boleh dikeluarkan Dipesan.

<div>
  <p>第一项</p>
  <p>第二项</p>
  <p>第三项</p>
</div>

Salin selepas log masuk

Walaupun kaedah ini boleh mengalih keluar titik kecil di hadapan, ia juga memusnahkan makna asal senarai, menyebabkan senarai kehilangan beberapa semantik. Mengalih keluar label senarai hanya untuk mengalih keluar titik mungkin bukan amalan yang baik.

Ringkasnya, kami telah memperkenalkan tiga kaedah biasa untuk mengalih keluar titik di hadapan item senarai. Kaedah mana yang hendak digunakan bergantung pada keperluan dan senario sebenar. Dalam pembangunan sebenar, kita juga boleh menggabungkan kaedah yang berbeza untuk memenuhi keperluan yang berbeza.

Atas ialah kandungan terperinci Bagaimana untuk mengalih keluar titik di hadapan item senarai li dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!