เพื่อแสดงเครื่องหมายรูปภาพให้ถูกต้องในทุกเบราว์เซอร์ จำเป็นต้องมีโซลูชันข้ามเบราว์เซอร์ การจัดตำแหน่งข้อความหลังเครื่องหมายรูปภาพบางครั้งบิดเบี้ยว เพื่อให้ได้ผลลัพธ์ที่สม่ำเสมอ เราจะระบุรูปภาพที่ใช้เป็นเครื่องหมายเป็นพื้นหลังและจัดตำแหน่งให้เหมาะสม
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงการจัดรูปแบบรายการ:
<!DOCTYPE html> <html> <head> <style> ul{ list-style-type: none; padding: 0px; margin: 0px; font-size: 1.5em; } ul li{ background-image: url("https://www.tutorialspoint.com/images/spring.png"); background-repeat: no-repeat; background-position: 0px 5px; padding-left: 24px; } </style> </head> <body> <h2>บทช่วยสอน</h2> <ul> <li>Java</li> <li>C#</li> <li>C</li> <li>C++</li> <li>Spring</li> <li>Hibernate</li> </ul> </body> </html>
ผลลัพธ์
ได้ผลลัพธ์ดังนี้:
ตัวอย่างเพิ่มเติม
<!DOCTYPE html> <html> <head> <style> ul{ box-shadow: inset 0 0 8px orange; list-style-type: none; padding: 12px; padding-left: 20px; margin: 2px; font-size: 1.35em; } ul li{ background-image: url("https://www.tutorialspoint.com/images/css.png"); background-repeat: no-repeat; background-position: 0px 5px; padding-left: 40px; font-style: italic; } </style> </head> <body> <p>ข้อกำหนด:</p> <ul> <li>บทช่วยสอน</li> <li>คำถามสัมภาษณ์</li> <li>แบบทดสอบ</li> </ul> </body> </html>
ผลลัพธ์
ได้ผลลัพธ์ดังนี้:
