CSS ul li 图像与文本对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/276732/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS ul li image to align with text
提问by Aximili
I have a CSS like this
我有一个这样的 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;
}
But the bullet image doesn't align properly in IE (it's fine in Firefox). I already have a background image for li, so I can't use the bullet image as a background. Is there any solution to this?
但是子弹图像在 IE 中没有正确对齐（在 Firefox 中很好）。我已经有 li 的背景图片，所以我不能使用子弹图片作为背景。有什么解决办法吗？
Thanks in advance.
提前致谢。
采纳答案by Aximili
Thank you both of you. The problem is that I already use background for a line-separator. But I'll change it to border then I'll use background for the bullet image.
谢谢你们俩。问题是我已经使用背景作为行分隔符。但我会将其更改为边框，然后我将使用子弹图像的背景。
回答by Jeremy Ruten
There is a good explanation and solution of this here: http://css.maxdesign.com.au/listutorial/master.htm
这里有一个很好的解释和解决方案：http: //css.maxdesign.com.au/listutorial/master.htm
It says that using list-style-imageresults in inconsistent placement of the image with different browsers. Then it explains how to use background images for the bullets for a better result.
它说使用会list-style-image导致图像在不同浏览器中的位置不一致。然后它解释了如何为子弹使用背景图像以获得更好的结果。
回答by Stavros
use line-height :)
使用行高:)
回答by Kon
I see you're removing left padding for list items. For IE, you need to do the same with the left margin - either completely remove it (set to zero) or make it something smaller than the default. Then your list items will align nicely.
我看到您正在删除列表项的左填充。对于 IE，您需要对左边距执行相同的操作 - 要么完全删除它（设置为零），要么使其小于默认值。然后您的列表项将很好地对齐。
