CSS about list-style-image The resolution of the image alignment problem of icons

First of all, this problem as early as I began to learn the CSS is met, it is probably a big six months ago, and then really do not have to use the table to its small icons and text. But today, on the whim, I would like to use the standard as the "crookedness" of the table, so n months ago, the problem reappeared.

Expected implementation:

To start defining CSS:

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

Effects in IE and Firefox:

The Little Red triangle actually had an affair. The blind toss for a good while, still is no. (Note, the small icon originally in the vertical direction also and the text is not aligned, later with fireworks heightened, this is needless to say.) ）

I would like to post in the classic forum, but feel too much trouble, so look around for related posts.

Finally found a, get inspired, you can put that little red triangle as the background image of Li Ah.

So there is a more ingenious and purposeful definition of the following:

#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:

Expand: But what if I want to implement the small icon shown in the outer end of the text?

(1) Initially, you want to use the left padding space (padding-left) to empty the background image. Then redefine #main Li {

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

But the effect is not as expected, as follows:

Why is there a lot of space left before "March 31"? Oh, yes, the Li attribute automatically gives the small icon a character size empty in the first line, even if you define List-tyle-type:none.

(2) In the writing example writes to the above line, originally wanted to change the source file back to the original appearance, in Li inside deleted background:url (. /images/dot.gif) left top no-repeat; this sentence, and then preview, pleasantly surprised to find in the IE show the perfect effect out, really quirks Oh!

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

：

The only drawback is that in Firefox is not so lucky,

Padding no effect on the small icons:

Holding the dead horse as a living horse medical attitude, I put padding-left:12px, changed to margin-left:12px;

Preview:

Ie:

Firefox

Oh, is this true?

In addition, the small icon and text spacing in Firefox is a little bit wider than IE, it's almost perfect.

Let's set off firecrackers and celebrate!

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

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