Hallo gan.. lama ane gak bikin artikel tentang desain :D emang sih ane gak jago desain, ane juga masih belajar dan disini juga ane gak bermaksud mengajarkan agan semua, ane cuma mau berbagi sedikit ilmu yang sudah ane pelajari :D karena salah satu amal yang mengalir sampai mati adalah Ilmu yang bermanfaat.
Oke gan.. langsung ke topik pembahasan, jadi kali ini ane mau berbagi sedikit tentang ul design ada banyak cara dan gaya yang bisa di lakukan untuk mendesain ul ini, dan yang mau ane bagikan kali ini adalah style inline-table. Oke, lihat gambar di bawah ini gan:
Sekilas tampilan di atas terlihat seperti menggunakan table, padahal bukan. Lihat urutan nomor konten dia berurutan ke kanan 2 angka kemudian jatuh pada baris baru. Biar jelas, kita langsung ke source code aja gan, tapi ingat buat dulu file index.html yang akan di jadikan lahan buat latihan gan, nantinya di open with notepad++ atau editor lain nya, kemudian salin (ketik ulang atau kopas) source kode di bawah ini :
<html> <head> <style> .bungkus { margin: 15% auto; width: 45%; border: 1px solid #333; } .bungkus ul { list-style: none; padding: 0; margin: 0; } .bungkus ul li { border: 1px solid ; display: inline-table; width: 48.5%; text-align: center; padding: 2% 0; margin: 0.3%; } style> head> <body> <div class="bungkus"> <ul> <li> Content 1 li> <li> Content 2 li> <li> Content 3 li> <li> Content 4 li> <li> Content 5 li> <li> Content 6 li> <li> Content 7 li> <li> Content 8 li> <li> Content 9 li> <li> Content 10 li> <li> Content 11 li> <li> Content 12 li> <li> Content 13 li> <li> Content 14 li> <li> Content 15 li> ul> div> body> html>
copy code :
Sedikit tips dari ane gan, pada syntax css di atas kunci utama nya terdapat pada .bungkus ul li { display: inline-table;} bagian inilah yang membuat li tampak satu baris dan jatuh ke baris baru apabila panjang li memenuhi pembatas/wrapper konten dalam element tersebut.
Sekian dari ane gan, semoga mudah di pahami. jika ada pertanyaan jangan sungkan untuk berkomentar :D
Comments