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:
- Set the list type to no list item mark
- Set padding and margins to 0px (browser compatibility)
All li in ul:
- Set the URL of the image and set it to be displayed only once (no repetition)
- Position of the positioning image you need (left 0px and top and bottom 5px)
- 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;
}