คุณสมบัติ list-style-position
คุณสมบัติ list-style-position บ่งชี้ว่า marker ควรปรากฏภายในหรือภายนอกกล่องที่มี bullet points รับค่าได้ 2 ค่า:
| ค่า | คำอธิบาย |
|---|---|
| none | N/A |
| inside | หากข้อความขึ้นบรรทัดใหม่ ข้อความจะ wrap อยู่ใต้ marker จะย่อหน้าเข้ามาที่ตำแหน่งที่ข้อความจะเริ่มต้นหาก list มีค่า outside |
| outside | หากข้อความขึ้นบรรทัดใหม่ ข้อความจะจัดให้ตรงกับจุดเริ่มต้นของบรรทัดแรก (ขวามาของ bullet) |
ตัวอย่าง
ลองรันโค้ดต่อไปนี้เพื่อนำ list-style-position property ไปใช้:
<html>
<head>
</head>
<body>
<ul style="list-style-type:circle; list-style-position:outside;">
<li>BMW</li>
<li>Audi</li>
</ul>
<ul style="list-style-type:square; list-style-position:inside;">
<li>BMW</li>
<li>Audi</li>
</ul>
<ol style="list-style-type:decimal; list-style-position:outside;">
<li>BMW</li>
<li>Audi</li>
</ol>
<ol style="list-style-type:lower-alpha; list-style-position:inside;">
<li>BMW</li>
<li>Audi</li>
</ol>
</body>
</html>
