CSS list item mark browser compatibility solution

Also in all browsers, the following example will display the image tag:
Example:

ul
{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
ul li
{
    background-image: url(sqpurple.gif);
    background-repeat: no-repeat;
    background-position: 0px 5px; 
    padding-left: 14px; 
}

Example explanation:
ul:

  1. Set the list type to no list item mark
  2. Set padding and margins to 0px (browser compatibility)

All li in ul:

  1. Set the URL of the image and set it to be displayed only once (no repetition)
  2. Position of the positioning image you need (left 0px and top and bottom 5px)
  3. Use the padding-left property to put the text in the list

Remove default settings

The list-style-type: none attribute can be used to remove small marks. By default list <ul>or <ol>provided within the padding and margins, using margin: 0 and padding: 0 to remove:

Examples:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Guess you like

Origin blog.csdn.net/Serena_tz/article/details/114027878