home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

วิธีสร้างรายการไม่มีลำดับ (Unordered List) ใช้รูปภาพเป็น Bullet ใน HTML

ใช้ CSS property list-style-image ในแท็ก <ul> เพื่อกำหนดรูปภาพเป็น bullet แทน bullet เริ่มต้น

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
  <title>HTML Unordered List</title>
</head>
<body>
  <h2>Tutorials</h2>
  <p>The list of tutorials:</p>
  <ul style="list-style-image: url('/theme/css/icons/image-editor.png');">
    <li>Java</li>
    <li>C++</li>
    <li>Ruby</li>
  </ul>
</body>
</html>

ข้อควรระวัง

  • ขนาดรูปภาพควรเล็ก (16x16px - 24x24px) ไม่ใหญ่เกินไป
  • รูปแบบที่รองรับ: PNG, GIF, SVG (แนะนำ SVG สำหรับความคมชัด)
  • URL ใช้ได้ทั้ง relative และ absolute path
  • inline style จะ override global styles

วิธีที่ยืดหยุ่นกว่า (CSS ::marker)

ul.custom-bullets li::marker {
  content: url('icon.svg');
  /* หรือใช้ emoji */
  content: "🚀";
}

รองรับใน browser รุ่นใหม่ (Chrome 86+, Firefox 68+, Safari 14+)