Để hiển thị đúng điểm đánh dấu hình ảnh trong tất cả các trình duyệt, cần phải có giải pháp trình duyệt chéo. Căn chỉnh văn bản sau điểm đánh dấu hình ảnh đôi khi bị bóp méo. Để đạt được đầu ra đồng nhất, chúng tôi chỉ định hình ảnh được sử dụng làm điểm đánh dấu làm nền và căn chỉnh nó cho phù hợp.
Ví dụ
Các ví dụ sau minh họa kiểu danh sách -
<!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> Đầu ra
Điều này cho kết quả sau -
Ví dụ
<!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> Đầu ra
Điều này cho kết quả sau -
