Cara Meratakan Bullet List ul/ol di Samping Gambar dengan CSS

Baru kali ini dapetin solusi untuk masalah layout CSS list ul/ol (unordered list/ordered list) apabila diletakkan di samping gambar/foto yang di float. Hasil dengan CSS biasa, menyebabkan bullet/number di bagian samping atau sebelah foto atau gambar tidak inden secara fluid dengan paragrap. Ini tentunya tidak nyaman dilihat. Contoh berikut ini cara untuk meratakan bullet/list ul/ol dengan paragraf. Makanya langsung diposting biar ga lupa. Hehehe…

Lihat contoh di bawah. Sungguh tidak menyenangkan sekali bukan?

Kadang kejadiannya seperti ini:

Padahal maunya hasilnya seperti ini:

Caranya cuma ngubah CSS utk ul/ol dan li seperti ini:

ul, ol {
margin-left: 0;
padding-left: 0;
}

ul li, ol li {
margin-left: 0;
padding-left: 0;
position: relative;
left: 20px;
}

Lihat demo di sini.

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan.