Apakah tinggi dan lebar tidak berlaku untuk span?

254

Pertanyaan noob total, tapi di sini.

CSS

.product__specfield_8_arrow {

    /*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;
}​​​

HTML

<span class="product__specfield_8_arrow">&nbsp;</span>​

Biola

Pada dasarnya saya mencoba untuk meniru tombol, membuat rentang (atau sesuatu) terlihat seperti tombol di sebelah bidang input yang sebenarnya tidak perlu menjadi salah satu karena generator pengisian otomatis yang menghasilkan kesalahan onEnter. Kupikir ini akan menjadi perbaikan cepat untuk saat ini tetapi jelas tidak.

Terima kasih.

css html width Kyle
sumber
2
Anda mungkin juga ingin memeriksa stackoverflow.com/questions/2343989/…
Edan Maor
2
Juga periksa standar, khususnya w3.org/TR/CSS2/visudet.html#the-width-property dan w3.org/TR/CSS2/visudet.html#the-height-property , yang menyatakan properti "Berlaku untuk: semua elemen kecuali elemen sebaris yang tidak diganti, baris tabel, dan grup baris "
outis

Jawaban:

426

Span adalah elemen inline. Tidak memiliki lebar atau tinggi.

Anda bisa mengubahnya menjadi elemen tingkat blok, lalu akan menerima arahan dimensi Anda.

span.product__specfield_8_arrow
{
    display: inline-block; /* or block */
}
Basheer AL-MOMANI
sumber
9
Terima kasih, perbaiki. Saya mencoba tampilan: blok sebelumnya tetapi blok inline memperbaikinya.
Kyle
21
Itulah masalahnya. Jika display: blockditentukan, span berhenti menjadi elemen inline dan elemen setelah itu muncul di baris berikutnya. Saya membutuhkan elemen yang sejajar, tetapi bisa dengan lebar yang diinginkan.
Paul
6
solusi yang lebih baik adalah tampilan pengguna: inline-block
Anant
37

Coba gunakan divbukan spanatau menggunakan CSS display: block;atau display: inline-block;- spansecara default elemen inline yang tidak dapat mengambil widthdan heightproperti.

Ishak
sumber
9
div bukan pengganti semantik untuk rentang waktu. Rentang adalah wadah teks sedangkan div adalah wadah tata letak. Menerapkan gaya blok-inline seperti Seni Pengembang telah menyarankan adalah jawaban yang benar.
Brian Scott
3
Pertanyaan tidak memberikan konteks untuk menunjukkan bahwa div secara inheren tidak pantas secara semantik.
Isaac
1
Sebenarnya, membaca markup op itu benar-benar terlihat seperti elemen yang dimaksud sedang digunakan untuk hanya menampilkan gambar latar belakang. Dalam hal ini div sebenarnya akan lebih tepat. -1 dihapus dari komentar asli Isaac.
Brian Scott
Lebih lanjut, saya mencoba menggunakan div sebelum beralih ke span, selalu ditampilkan di bawah div sebelumnya .. Jadi lanjutkan dengan Span :)
Kyle
22

Terinspirasi dari @Hamed, saya menambahkan yang berikut ini dan berhasil untuk saya:

display: inline-block; overflow: hidden;
olleh
sumber
11

Rentang membutuhkan lebar dan tinggi hanya ketika kita membuatnya elemen blok.

span {display:block;}
Touhid Rahman
sumber
14
Saya pikir display: inline-block;lebih baik
151291
Dengan melakukan ini, Anda akan berubah untuk semua rentang, saya sarankan menggunakan kelas.
Hola Soy Edu Feliz Navidad
9

Sesuai komentar dari @Paul, Jika tampilan: blok ditentukan, span berhenti menjadi elemen inline dan elemen setelah muncul di baris berikutnya.

Saya datang ke sini untuk mencari solusi untuk masalah tinggi bentang saya dan saya mendapat solusi sendiri

Menambahkan overflow:hidden;dan memasukkannya secara inline akan menyelesaikan masalah yang baru saja diuji dalam mode IE8 Quirks

Hamed Ali Khan
sumber
Saya terus melihat overflow:hidden;dalam konteks ini. "Konten terpotong, tanpa bilah gulir" kata MDN . Tampaknya berlawanan dengan intuisi. Apa fungsinya di sini?
Bob Stein
8

spans secara default ditampilkan sebaris, yang berarti mereka tidak memiliki tinggi dan lebar.

Coba tambahkan display: blockrentang Anda.

Edan Maor
sumber
6

Rentang dimulai sebagai elemen sebaris. Anda dapat mengubah atribut tampilan untuk diblokir, misalnya, dan atribut tinggi / lebarnya akan mulai berlaku.


sumber
2

span {display:block;} juga menambah line-break.

Untuk menghindarinya, gunakan span {display:inline-block;}dan kemudian Anda bisa menambahkan lebar dan tinggi ke elemen sebaris, dan Anda juga bisa menyelaraskannya di dalam blok:

span {
        display:inline-block;
        width: 5em;
        font-weight: normal;
        text-align: center
     }

lebih lanjut di sini

markling
sumber