Desain ul li inline-table dengan CSS

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:

gambar 1

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

  • No Comment Yet
Please login first for post a comment

Widget

Blogroll