การใช้งาน CSS list-style-position Property

บทนำ

Property list-style-position กำหนดตำแหน่งของเครื่องหมายรายการ (bullet/number) เทียบกับ content box ของ list item

ค่าที่ใช้ได้

ตัวอย่างโค้ด

<html>
<head></head>
<body>
  <ul style="list-style-type:circle; list-style-position:outside;">
    <li>Maths</li>
    <li>Science</li>
  </ul>
</body>
</html>

ตัวอย่างเปรียบเทียบ Outside vs Inside

<style>
  .outside { list-style-position: outside; border: 1px solid red; padding-left: 20px; }
  .inside { list-style-position: inside; border: 1px solid blue; padding-left: 20px; }
  li { margin: 10px 0; background: #f5f5f5; }
</style>

<h3>Outside (Default)</h3>
<ul class="outside">
  <li>This is a long list item that wraps to the next line and the text aligns with the first line</li>
  <li>Short</li>
</ul>

<h3>Inside</h3>
<ul class="inside">
  <li>This is a long list item that wraps to the next line and the text wraps under the marker</li>
  <li>Short</li>
</ul>

Shorthand: list-style

/* type position image */
list-style: square inside;
list-style: disc outside url('bullet.png');
list-style: decimal outside;

การใช้งานกับ Ordered List (ol)

ol.outside { list-style-position: outside; }
ol.inside { list-style-position: inside; }

/* หมายเลข 1. 2. 3. จะอยู่ตำแหน่งต่างกัน */
<ol class="outside"><li>Long text...</li></ol>
<ol class="inside"><li>Long text...</li></ol>

JavaScript

// ดึงค่า
var pos = element.style.listStylePosition; // "outside" | "inside"

// ตั้งค่า
element.style.listStylePosition = "inside";
element.style.listStylePosition = "outside";

เมื่อไหร่ควรใช้ Inside

• ต้องการ bullet ใส่ในกรอบพร้อม border/background
• Layout แบบ card ที่ bullet เป็นส่วนหนึ่งของ content
• Print stylesheet บางครั้ง

เมื่อไหร่ควรใช้ Outside (Default)

• เอกสารทั่วไป readability ดีกว่า
• Nested lists จัดการง่ายกว่า
• Standard typography