จัดแต่งรายการด้วย CSS

รายการมีการสั่งซื้อเช่นกัน unordered ด้วย CSS คุณสามารถตั้งค่าเครื่องหมายรายการที่กำหนดหรือรูปภาพสำหรับเครื่องหมายได้ ด้วยเหตุนี้ ด้วย CSS เราจึงสามารถกำหนดตำแหน่งสำหรับเครื่องหมายรายการได้

เรามาดูตัวอย่างกัน −

list-style-type

list-style-type ใช้เพื่อกำหนดประเภทของตัวทำเครื่องหมายรายการ

ตัวอย่าง

ให้เราดูตัวอย่างที่เราจัดรูปแบบรายการเรียงลำดับ (ol) -

<!DOCTYPE html>
<html>
<head>
<style>
ul {
   list-style-type: upper-roman;
}
</style>
</head>
<body>
<h2>Teams</h2>
<ul>
<li>India</li>
<li>Australia</li>
<li>England</li>
<li>West Indies</li>
<li>South Africa</li>
<li>Srilanka</li>
</ul>
</body>
</html>

ผลลัพธ์

จัดแต่งรายการด้วย CSS

list-style-image

คุณสมบัติ list-style-image ใช้เพื่อตั้งค่ารูปภาพเป็นเครื่องหมายรายการ

ตัวอย่าง

เรามาดูตัวอย่างกัน −

<!DOCTYPE html>
<html>
<head>
<style>
ul.demo1 {
   list-style-image: url('https://www.tutorialspoint.com/images/Swift.png');
}
ol.demo2 {
   list-style-image: url('https://www.tutorialspoint.com/images/Swift.png');
}
</style>
</head>
<body>
<h2>Teams</h2>
<ul class="demo1">
<li>India - Qualified for WordCup</li>
<li>Australia - Qualified for WordCup</li>
<li>England - Qualified for WordCup</li>
</ul>
<h2>Players</h2>
<ol class="demo2">
<li>Virat Kohli</li>
<li>David Warner</li>
<li>Steve Smith</li>
</ol>
</body>
</html>

ผลลัพธ์

จัดแต่งรายการด้วย CSS

รายการสไตล์ตำแหน่ง

คุณสมบัติ list-style-position ใช้เพื่อกำหนดตำแหน่งของตัวทำเครื่องหมายรายการ

ตัวอย่าง

เรามาดูตัวอย่างกัน −

<!DOCTYPE html>
<html>
<head>
<style>
ul.demo1 {
   list-style-position: outside;
}
ul.demo2 {
   list-style-position: inside;
}
</style>
</head>
<body>
<h1>Teams</h1>
<h2>ODI Teams</h2>
<ul class="demo1">
<li>India</li>
<li>Australia</li>
<li>England</li>
<li>West Indies</li>
<li>South Africa</li>
<li>Srilanka</li>
</ul>
<h2>Test Teams</h2>
<ul class="demo2">
<ul>
<li>India</li>
<li>Australia</li>
<li>England</li>
<li>West Indies</li>
<li>South Africa</li>
<li>Srilanka</li>
</ul>
</ul>
</body>
</html>

ผลลัพธ์

จัดแต่งรายการด้วย CSS