Share three methods of adding icons to li tags

We often use the li tag when laying out the page. Using the li tag alone is relatively monotonous. Sometimes, for the sake of page effect, we need to add pictures. So how do we add pictures to the li tag? This article will share with you three methods of adding icons to li tags. I hope it will be useful to you.

1. Use the special attributes of CSS

ul{list-style-type:disc;} //The role of disc It is to add a black dot before each li. Other commonly used ones are square: black square; none: no list style; decimal: number;

You can also control whether the icon is outside or inside the li tag, such as

ul{list-style-position:inside;} or outside

If you want to add your own custom pattern, you can use

ul{list-style-image:url (Picture address);}

Of course this can also be used with position.

But I have never applied the above attributes, and I don’t recommend them to everyone. Why?

First of all, the list-style-type of ul displays different sizes of dots or squares in different browsers, which is very unsightly.

Furthermore, the positon attribute is not easy to use. I have tried to use this attribute. The result is that the orientation displayed in IE6 and above and Firefox is difficult to unify.

2. I recommend using background

ul{….;list-style-type:none;….}

li{…. ;background:url (background icon) no-repeat 0px 0px;….}

The function of no-repeat here is to prevent the image from producing a tiling effect, and 0px, 0px are the coordinates for positioning the image display.

Let me state one more point here. To add a background image to li, you also need to add padding-left: any number px, otherwise the text will block the background icon, but at the same time, you must not add width to li, otherwise it will be different. There is a problem with compatibility under the browser. For details, please see the positioning in CSS and use the padding attribute with caution

3. Use background to implement the ranking list

In fact, this is very simple, you just need to work around it. Just click it

ul{….;background:url(path) no-repeat 1px 2px;….}

You should know, just add the picture to ul instead of li, but the difference is that the pictures are 1, 2, 3... pictures neatly arranged in column order, or other effects you want. It should be noted that the height of each row corresponds closely to the picture.

The above is the detailed content of Share three methods of adding icons to li tags. For more information, please follow other related articles on the PHP Chinese website!