Mengapa Gaya Tinggi dan Lebar Tidak Berfungsi pada Elemen Span, dan Bagaimana Saya Boleh Membetulkannya?

Menggayakan Elemen Span dengan Tinggi dan Lebar

Walaupun sifat CSS seperti ketinggian dan lebar biasanya digunakan dengan elemen peringkat blok, ia mungkin tidak berkelakuan seperti yang diharapkan dengan elemen sebaris. Ini amat relevan apabila menggayakan elemen span, selalunya digunakan untuk pemformatan teks sebaris.

Dalam contoh yang diberikan, kod HTML mentakrifkan span dengan kelas product__specfield_8_arrow. Gaya CSS untuk rentang ini termasuk pengisytiharan ketinggian dan lebar yang jelas, tetapi ia tidak mempunyai kesan. Ini kerana span ialah elemen sebaris, yang tidak mempunyai dimensi yang wujud secara lalai.

Untuk menjadikan span berkelakuan seperti butang dalam penampilan, ia boleh ditukar menjadi elemen tahap blok. Ini boleh dicapai dengan menambahkan pengisytiharan berikut pada CSS:

span.product__specfield_8_arrow {
    display: inline-block;
}

Dengan menetapkan sifat paparan kepada sekatan sebaris, rentang menjadi elemen peringkat blok yang boleh menerima nilai ketinggian dan lebar. Gaya CSS lain yang digunakan pada rentang kini akan digunakan dengan betul, membolehkan rentang bertindak seperti butang secara visual.

Atas ialah kandungan terperinci Mengapa Gaya Tinggi dan Lebar Tidak Berfungsi pada Elemen Span, dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!