ในการแสดงเครื่องหมายรูปภาพอย่างถูกต้องในเบราว์เซอร์ทั้งหมด จำเป็นต้องใช้โซลูชันข้ามเบราว์เซอร์ การจัดตำแหน่งข้อความหลังจากเครื่องหมายรูปภาพบางครั้งบิดเบี้ยว เพื่อให้ได้ผลลัพธ์ที่สม่ำเสมอ เราระบุรูปภาพที่จะใช้เป็นเครื่องหมายเป็นพื้นหลังและจัดแนวตามนั้น
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการจัดรูปแบบรายการ -
<!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>Tutorials</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>Requirements:</p> <ul> <li>Tutorials</li> <li>Interview QA</li> <li>Quiz</li> </ul> </body> </html>
ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -