css solution to the icon image alignment problem of list-style-image

First of all, I have encountered this problem as early as when I first started learning CSS, which was probably more than half a year ago. Later, I couldn’t do anything, so I switched to using tables to deal with small icons and text. But today, on a whim, I didn't want to use the form that was considered "evil" by standards, so the problem from n months ago reappeared.

Expected implementation renderings:

Start defining css:

#main ul{
 display:inline;
 margin: 0px;
 padding:0px;
   list-style: url(../images/dot.gif) outside;
 }
 #main li {
 line-height:150%;
 }

The effect in IE and Firefox:

Little Red Triangle actually got cheated on. I've been messing around for a while, but still can't figure it out. (Note, the small icon was originally not aligned with the text in the vertical direction, but was later raised using Fireworks. Needless to say, this point goes without saying.)

I wanted to post in the classic forum , but I thought it was too troublesome, so I looked for related posts everywhere.

Finally found one, and I was inspired to use that little red triangle as the background image of li.

So we have the following more clever and purposeful definition method:

#main ul{
 display:inline;
 margin: 0px;
 padding:0px;
   list-style-type:none;
 }
 #main li {
 background: url(../images/dot.gif) left top no-repeat;
    line-height:150%;
 }

The effect is as follows:

Expansion: But if I What should I do if I want to put the small icon as shown in the picture below at the outer end of the text?

(1) At the beginning, I wanted to use the left padding space (padding-left) to empty the background image. So #main li {

padding-left:12px; 
background: url(../images/dot.gif) left top no-repeat;    line-height:150%; }

was redefined, but the effect was not as expected, as follows:

Why before "March 31" How many vacancies are there? Oh, by the way, the li attribute automatically leaves a character-sized space in the first line for small icons, even if you define list-tyle-type:none.

(2) When I wrote the above line in this example, I wanted to change the source file back to its original appearance, so I deleted the background in li: url(../images/dot.gif) left top no -repeat; After previewing this sentence, I was pleasantly surprised to find that the perfect effect appeared in IE. It was really a strange combination of circumstances!

#main ul{
 display:inline;
 margin: 0px;
 padding:0px;
   list-style: url(../images/dot.gif) outside;
 }
 #main li {
 padding-left:12px;
 line-height:150%;
 }

Rendering:

The only shortcoming is that we are not so lucky in firefox,

padding has no effect on the small icon Above:

With the attitude of treating a dead horse as a living horse, I changed padding-left:12px; to margin-left:12px ;

Preview:

ie:

firefox:

oh, is this true?

Except that the small icons and text spacing in Firefox are a little wider than in IE, it is really almost perfect.

Let's set off firecrackers to celebrate!

Finally, let us remember the most standard definition method of list-style-type:image;:

#main ul{
 display:inline;
 margin: 0px;
 padding:0px;
   list-style: url(../images/dot.gif) outside;
 }
 #main li {
 margin-left:12px;
 line-height:150%;
 }

The above is the detailed content of css solution to the icon image alignment problem of list-style-image. For more information, please follow other related articles on the PHP Chinese website!