May 03, 2021 CSS
4. The image marked as a list item
5. Browser compatibility solutions
The CSS list properties work as follows:
In HTML, there are two types of HTML lists:
With CSS, you can list further styles and mark them with images as list items.
list-style-type
specifies that the type of list item tag is:
Some values are unseeded tables, and some are ordered lists.
The following is a description of the common property values of the
list-style-type
property:
none
Bullets are not used
disc
Solid circle
circle
Hollow circle
square
Solid block
decimal
Arabic numerals
lower-alpha
lowercase English letters
upper-alpha
Capital Letters
lower-roman
lower-case Roman numerals
upper-roman
Capital Roman numerals
To specify an image marked by a list item, use the list style image properties:
The above examples vary across major browsers, with IE and Opera showing image tags a little higher than Firefox, Chrome and Safari.
Tips:
list-style-position
determine whether a flag appears outside or inside the content of a list item.- If you want to place the same image logo in all browsers, you should use a browser compatibility solution in the following ways.
Also in all browsers, the following example shows the image tag:
Examples explain:
padding-left
property
You can specify all list properties in a single property. This is called a short-case property.
Using short-case properties for lists, list style properties are set as follows:
If the order in which the abbreviated property values are used is:
list-style-type
list-style-position
(see CSS property sheet below for instructions)
list-style-image
In short write properties, it doesn't matter if one of the above values is missing and the rest is still in the specified order.
All the different list item tags
This example demonstrates all the different CSS list item tags.
Property | Describe |
---|---|
list-style | Short-case properties. Used to set all the properties used for the list in one declaration |
list-style-image | Set the image as a list item flag. |
list-style-position | Set the location of the list item flag in the list. |
list-style-type | Set the type of list item flag. |