CSS如何使ul li中的图片与文本对齐

Question

我有一个如下的CSS

ul {
    list-style-image:url(images/bulletArrow.gif);
}

ul li {
    background: url(images/hr.gif) no-repeat left bottom;
    padding: 5px 0 7px 0;
}

但是在IE浏览器中，子弹图片无法正确对齐（在Firefox中没有问题）。 我已经为li设置了背景图像，因此无法将子弹图片作为背景使用。 有什么解决方法吗？

提前感谢。

- Aximili

---

你能提供更多的信息吗？你使用的是哪个版本的IE（如果它给你带来了很多麻烦，那么很可能是IE6）？你是否尝试将图像与文本垂直对齐？这个图像看起来像什么？只是一个简单的水平线吗？ - Phil.Wheeler

Answer 1

这里有一个很好的解释和解决方案：http://css.maxdesign.com.au/listutorial/master.htm

它说使用 list-style-image 会导致不同浏览器中图片的位置不一致。然后它解释了如何使用背景图片来替代实现更好的效果。

- Jeremy Ruten

---

哇，为了完成一件简单的事情需要大量的代码。不需要！ - Johann

@AndroidDev 嗯，这是7行CSS代码，实际上可以使用缩写属性进行合并。享受避免LOC的乐趣吧。 - coreyward

Answer 2

使用line-height :)

- Stavros

Answer 3

我看到你正在移除列表项的左内边距。对于IE浏览器，你需要同样地将左外边距也去掉 - 要么完全去掉（设为零），要么将其设置为小于默认值的某个值。然后你的列表项就会对齐得很好。

- fallen888

Answer 4

非常感谢你们两位。问题在于我已经使用背景作为分割线了。但我会将其更改为边框，然后我会将背景用于项目符号图像。

- Aximili

Answer 5

可以使用类似这样的代码：

ul li {
    background: url(images/bulletArrow.gif);
    padding: 5px 30px 5px 25px;
    list-style: none;
    margin: 0;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: 180px 8px;
}

这个链接应该会有所帮助。

- Mostafa Saadatnia