Karena pertanyaan ini mendapatkan banyak pandangan dan ini adalah jawaban yang diterima, saya merasa perlu menambahkan penafian berikut:
Jawaban ini khusus untuk pertanyaan OP (Yang memiliki set lebar dalam contoh). Meskipun berhasil, Anda harus memiliki lebar pada setiap elemen, gambar, dan paragraf. Kecuali itu kebutuhan Anda, saya sarankan menggunakan solusi Joe Conlin yang diposting sebagai jawaban lain untuk pertanyaan ini.
The span
elemen elemen inline, Anda tidak dapat mengubah lebar dalam CSS.
Anda dapat menambahkan CSS berikut ke span Anda sehingga Anda dapat mengubah lebarnya.
display: block;
Cara lain, yang biasanya lebih masuk akal, adalah menggunakan <p>
elemen sebagai induk untuk Anda <span>
.
<li id="CN2787">
<img class="fav_star" src="images/fav.png">
<p>
<span>Text, text and more text</span>
</p>
</li>
Karena <p>
merupakan block
elemen, Anda dapat mengatur lebarnya menggunakan CSS, tanpa harus mengubah apa pun.
Namun dalam kedua kasus tersebut, karena Anda memiliki elemen blok sekarang, Anda perlu mengapung gambar sehingga teks Anda tidak semuanya berada di bawah gambar Anda.
li p{width: 100px; margin-left: 20px}
.fav_star {width: 20px;float:left}
PS Alih-alih float:left
pada gambar, Anda bisa juga menempatkan float:right
pada li p
tetapi dalam kasus itu, Anda juga akan perlu text-align:left
untuk meluruskan kembali teks dengan benar.
PSS Jika Anda melanjutkan dengan solusi pertama dengan tidak menambahkan <p>
elemen, CSS Anda akan terlihat seperti ini:
li span{width: 100px; margin-left: 20px;display:block}
.fav_star {width: 20px;float:left}