Community Learn Tools Library Leisure
search
English

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


Continuing Learning
||
<!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>
submitReset Code
Previous section Next Section
Tutorial List
get help
  • Course Recommendations
  • Courseware download
The courseware is not available for download at the moment. The staff is currently organizing it. Please pay more attention to this course in the future~

Students who have watched this course are also learning

The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)  492291 plays