Bagaimanakah Saya Boleh Membuat Warna Latar Belakang Hanya Selebar Teks Saya Menggunakan CSS Tulen?

Menetapkan Warna Latar Belakang untuk Lebar Teks Menggunakan CSS Tulen

Apabila memanipulasi warna latar belakang dalam elemen HTML, menjajarkan lebar warna dengan kandungan teks boleh menjadi mencabar. Soalan ini menyelami senario tertentu di mana warna latar belakang bertujuan untuk memanjangkan hanya di belakang teks, bukan lebar keseluruhan elemen.

Coretan kod yang disediakan menggunakan elemen h1 dengan warna latar belakang ditetapkan kepada hijau:

h1 { 
    text-align: center; 
    background-color: green; 
}

Kod ini menghasilkan latar belakang hijau yang merentangi keseluruhan lebar halaman, menjangkau jauh melebihi teks. Untuk menyelesaikan isu ini, penyelesaian mencadangkan membenamkan teks dalam elemen sebaris, seperti elemen:

<h1><span>The Last Will and Testament of Eric Jones</span></h1>

Elemen sebaris, tidak seperti elemen peringkat blok seperti

, hanya menduduki ruang yang diperlukan oleh kandungannya. Dengan menggunakan warna latar belakang pada elemen:

h1 span { 
    background-color: green; 
}

warna latar belakang terhad kepada lebar teks, menghasilkan kesan yang diingini. Teknik ini membenarkan kawalan tepat ke atas tahap warna latar belakang, memastikan ia sejajar dengan kandungan teks tanpa mengganggu reka letak elemen sekeliling.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Warna Latar Belakang Hanya Selebar Teks Saya Menggunakan CSS Tulen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!