UL列表样式图像提供不需要的填充

Question

我有一个类似的列表：

<ol>
    <li class="node">1</li>
    <li class="node">2</li>
    <li class="node">3</li>
    <li class="node">4</li>
    <li class="node_end">5</li>
</ol>

我正在使用图片替换CSS中的默认项目符号。单独的图像用于终端节点以及另一个图像用于所有其他项目符号点。图像显示，但是只要我添加这些图像，就会以某种方式将4像素填充添加到每个列表项的顶部和底部。这个额外的间距将高度从26像素高变为34像素高。这个间隙在不同的子弹点图像之间提供了大约8像素的间隔，根据我的设计，它们的间隔为0px。

我制作的CSS：

li {
    margin: 0;
    padding: 0;
    border: 0;
}
li.node {
    list-style-image: url('../imgs/nodes/udr.png');
}
li.node_end {
    list-style-image: url('../imgs/nodes/ur.png');
}

有没有办法删除这个间距？我已经尝试删除与所有li相关的所有填充/间距/边框，但到目前为止还没有。

修改

我认为我的问题不够明确，所以我发布的是我最终的形象。

如上图所示，连接条应该连接起来（好像是一个连续的图像）。删除项目符号点的特殊CSS图像会将每个项目的高度降低到CSS项目符号点图像的高度（正如我使用Google Chrome浏览器的元素检查工具测试的那样）。

编辑2：

可以在此处找到显示我的问题的近似示例：http://jsfiddle.net/EyVRF/1/

Answer 1

Garry Cairns可能会有所作为。我测试了你的代码并从一个大小合适的网站借用了一个列表样式的图像，我看到没有填充是一个问题，或者至少不是你看到的类型。

http://jsfiddle.net/BYQQV/

list-style-image: url('http://www.globalindustrial.com/site/img/bullet_homecat.gif');

您可能还想考虑不必为最后一个列表项创建一个全新的类。尝试改为

li:last-child { list-style-image:.... }

Althouth IE对此并不满意。但是为了将来参考。

Answer 2

缺少.css和html无法回答你的问题。 关于：有没有办法删除这个间距？ 是。

试试这个：

ol, li{list-style-position:outside;margin:0;padding:0}

或

ol, li{list-style-position:inside;margin:0;padding:0}

让我猜一下？你没有重置你的.css ?? （余量：0;填充：0）

---

好的，我可以看到你想要的东西......而且很遗憾，你不可能以这种方式实现你想要的东西因为'子弹和第一个角色之间的填充是'浏览器特定的'和无法管理< / strong>通过css。

您必须使用其他技术：背景图片。

<ul>
    <li class="node">1</li>
    <li class="node">2</li>
    <li class="node">3</li>
    <li class="node">4</li>
    <li class="node_end">5</li>
</ul>

ul, li {
    margin: 0;
    padding: 0;
}
li {
    font-size:16px;
    line-height:16px;
    list-style-type:none;
    background:red url('http://placehold.it/16x16') no-repeat scroll 0 0;
    padding-left:16px;
    border-bottom:1px solid blue;
}
li.node_end {
    background:blue url('http://placehold.it/16x16') no-repeat scroll 0 0;
}

http://jsfiddle.net/2RtB7/1/

继续

PS，在寻求帮助之前尝试再搜索一下 - ＆gt; CSS: Control space between bullet and <li>