Mengapa Sifat Tinggi dan Lebar Tidak Berfungsi pada Elemen Span, dan Bagaimana Saya Boleh Membuatkannya Berfungsi?

Elemen Span dan Sifat Tinggi/Lebar

Dalam CSS, elemen span ialah elemen sebaris. Ini bermakna ia tidak mempunyai lebar atau ketinggian yang wujud, dan ia hanya mengambil sebanyak mungkin ruang yang diperlukan untuk menampung kandungannya. Akibatnya, menetapkan sifat ketinggian dan lebar untuk elemen span tidak akan mempunyai apa-apa kesan.

Walau bagaimanapun, anda boleh mengubah elemen span menjadi elemen tahap blok dengan menggunakan sifat paparan. Elemen tahap blok boleh mempunyai ketinggian dan lebar yang ditentukan, dan ia akan menduduki kawasan segi empat tepat pada halaman.

Untuk menjadikan elemen span kelihatan seperti butang, anda boleh menetapkan sifat paparan kepada blok sebaris atau blok . Ini akan membolehkan anda menggunakan sifat ketinggian dan lebar serta menggayakan elemen mengikut keperluan.

Berikut ialah versi terkini kod CSS anda dengan sifat paparan ditambah:

span.product__specfield_8_arrow {
    display: inline-block; /* or block */
    background-image:url(../../upload/orng_bg_arrow.png);
    background-repeat:no-repeat;
    background-color:#fc0;
    width:50px !important;
    height:33px !important;
    border: 1px solid #dddddd;
    border-left:none;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-bottom-left-radius:0px;
    border-top-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    -moz-border-radius-topleft:0px;
    -webkit-border-bottom-left-radius:0px;
    -webkit-border-top-left-radius:0px;
    margin:0;
    padding:2px;
    cursor:pointer;
}

Dengan perubahan ini , elemen span akan berkelakuan seperti elemen tahap blok dan akan mengambil dimensi ketinggian dan lebar yang ditentukan.

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