Question

下面是截图，说清楚。我正试图找出一种强有力的方法，使子弹图像垂直对齐我的内容。正如您所看到的，我的内容目前太高了。

非常感谢'过花'......

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

Answer 1

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

我没有实际设置'list-style-image'属性，而是通过为li元素设置background-image属性，获得了更加一致的结果。然后，您可以使用像素精度控制定位。请记住设置合适的左侧填充值以将列表项内容推送到子弹图像之外。

Answer 2

我喜欢@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使用不同的默认值来显示项目符号。

Answer 3

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

#content li{

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

}

Answer 4

使用background-image，为你的li元素添加填充。

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

如何使用<li>内容排列我的子弹图像？</li>

4 个答案: