เพื่อตั้งค่าเครื่องหมายรายการ (bullet/number) ให้อยู่นอกกล่องที่ครอบเนื้อหา ให้ใช้คุณสมบัติ list-style-position กับค่า outside
ตัวอย่าง
ค่า outside หมายถึง เมื่อข้อความยาวเกินบรรทัด ข้อความบรรทัดที่สองจะจัดตำแหน่งชิดกับจุดเริ่มต้นของบรรทัดแรก
<html> <head> </head> <body> <ul style = "list-style-type:circle; list-style-position:outside;"> <li>คณิตศาสตร์</li> <li>สังคมศึกษา</li> <li>ฟิสิกส์</li> </ul> <ol style = "list-style-type:decimal;list-style-position:outside;"> <li>คณิตศาสตร์</li> <li>สังคมศึกษา</li> <li>ฟิสิกส์</li> </ol> </body> </html>
ความแตกต่างระหว่าง outside และ inside:
- outside (ค่าเริ่มต้น): เครื่องหมายอยู่นอกบล็อกข้อความ ข้อความยาวจะไม่หุ้มใต้เครื่องหมาย
- inside: เครื่องหมายอยู่ในบล็อกข้อความ ข้อความยาวจะหุ้มใต้เครื่องหมาย
