如何将我的项目符号图像与我的 <li> 内容对齐？

【问题标题】：How can I line up my bullet images with my <li> content?如何将我的项目符号图像与我的 <li> 内容对齐？
【发布时间】：2010-09-18 02:03:22
【问题描述】：

这是一个屏幕截图，以使其清楚。我正在尝试找出一种使子弹图像与我的 li 内容垂直对齐的可靠方法。如您所见，我的内容目前太高了。

非常感谢'over-flowers'...

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

【问题讨论】：

标签： html css

【解决方案1】：

我喜欢@bryn 的回答。我成功使用的一个例子：

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

您的情况可能需要也可能不需要负右边距。您可能需要根据您的图像进行调整以满足您的特定需求。（我的图像是 14 x 15。）您必须专门设置边距和如果您希望跨浏览器具有相似的外观，因为 Firefox 和 IE 使用不同的默认值来显示项目符号。

【讨论】：

【解决方案2】：

使用背景图片，为您的 li 元素添加填充。

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

【讨论】：

像素背景位置容易产生问题。相反，使用相对限定符center left。另外，你知道background属性快捷方式吗？
是的，我知道捷径，但我喜欢我的声明冗长。像素定位解决了 Pickleegg 所描述的问题 - 默认情况下，图像不能很好地垂直对齐，并且子弹的设计可能需要像素级调整。

【解决方案3】：

好吧，一些 CSS 代码来看看你当前如何设置你的子弹图像会很有用;-)

我没有实际设置“list-style-image”属性，而是为 li 元素设置了 background-image 属性，结果更加一致。然后，您可以以像素精度控制定位。请记住设置一个合适的左填充值，以将您的列表项内容从项目符号图像中推开。

【讨论】：

我目前使用 Galwegian 展示的方法。我将试一试您的“
with background image”方法。看起来我会更灵活地排列图像:)

我什至从未使用过“list-style-image”，因为当我开始使用 CSS 时，不鼓励（Netscape 4）不能正确支持它。即使现在所有浏览器都支持它，我发现“背景图像”方法更有用。

【解决方案4】：

你可以在你的 css 中使用这样的东西...

#content li{

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

}

【讨论】：

谢谢老兄，我已经使用了，（应该已经发布了 CSS！）。 Bryn 的方法有望让我对对齐方式进行更多修改。