Set an image for a list item tag using a cross-browser solution

Example analysis:

ul:

● Set the list style type to no delete list Item tag

##● Set padding and margin to 0px (browser compatibility)

all li in ul:

● Set the URL of the image and set it to be displayed only once (no duplication)

● Set the position of the image you need (0px left and 5px top and bottom)

●Use the padding-left attribute to place text in the list

Next Section

new file

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
ul
{
	list-style-type:none;
	padding:0px;
	margin:0px;
}
ul li
{
	background-image:url("https://img.php.cn/upload/article/000/000/015/5c6e720242040312.gif");
	background-repeat:no-repeat;
	background-position:0px 5px; 
	padding-left:14px;
}
</style>
</head>

<body>
<ul>
<li>PHP</li>
<li>JavaScript</li>
<li>MySQl</li>
</ul>
</body>
</html>

submit Reset Code

Automatic operation

Full Screen