如何与我的子弹图像对齐 <li> 内容？

Question

Heres a screenshot to make it clear. I'm trying to figure out a robust way of making the bullet images vertically aligned to my li content. As you can see my content is currently too high.

Many thanks 'over-flowers'...

http://dl.getdropbox.com/u/240752/list-example.gif

Answer 1

Well, some css code to see how you currently set your bullet images would be useful ;-)

Instead of actually setting the 'list-style-image' property, I've had far more consistent results with setting a background-image property for the li element. You can then control the positioning with pixel accuracy. Remember to set a suitable left-padding value to push your list item contents clear of the bullet image.

Answer 2

I like @bryn's answer. One example I've used successfully:

#content ul li {
    margin: 3px -20px 3px 20px;
    padding: 0 0 0 0;
    list-style: none;
    background: url(newbullet.gif) no-repeat 0 3px;
}

The negative right margin may or may not be needed in your case. You may need to adjust to meet your specific needs depending on your image. (My image is 14 x 15.) You must specifically set margins and padding if you want a similar look across browsers as Firefox and IE use different defaults for displaying bullets.

Answer 3

You can use something like this in your css...

#content li{

    list-style-image: url(../images/bullet.gif);

}

Answer 4

use background-image, for your li elements, add padding.

.box li{
    padding-left: 20px;
    background-image: url("img/list_icon.jpg");
    background-repeat: no-repeat;
    background-position: 0px 2px;
    margin-top: 6px;
}