Fungsi Properties List-Style-Position CSS

Hallo teman-teman, bertemu lagi pada tutorial Dumet School, pada tutorial kali ini kita akan membahas tentang fungsi properties list-style-position pada CSS.
Bagi teman-teman yang sudah lama terjun pada dunia website pasti sering kali menggunakan tag ul dan li untuk membuat sebuah list-list dalam website, ketika pada sebuah website kita ingin membuat sebuah list maka script yang akan kita tuliskan adalah seperti berikut :

<ul>
 <li>List Pertama</li>
 <li>List kedua</li>
 <li class="tab">ketiga</li>
</ul>

Jika sudah coba teman-teman save dan lihat hasilnya, maka hasilnya akan seperti berikut :

Nah, coba sekarang tambahkan script CSS berikut dengan internal CSS :

.tab {
	list-style-position: inside;
}

Sehingga keseluruhan script-nya adalah sebagai berikut:

<html>
<head>
	<title>Latihan</title>
	<style>
	.tab {
			list-style-position: inside;
		}
	</style>
</head>
<body>
	<ul>
	 <li>List Pertama</li>
	 <li>List kedua</li>
	 <li class="tab">ketiga</li>
	</ul>
</body>
</html>

Saya mengatur class tab sengan properties list-style-position dengan nilai inside maka hasilnya akan seperti berikut :

Terlihat fungsi dari properties yang satu ini adalah membuat salah satu listnya menjorok kebagian dalam, oke teman-teman sekian dulu tutorial kali ini semoga bermanfaat.

Terimakasih.

Fungsi Properties List-Style-Position CSS

Kategori