1

我有一个类似的列表：

<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/

4

2 回答 2

1

加里凯恩斯可能会有所作为。我测试了您的代码并从一个大小合适的网站借用了一个列表样式的图像，并且我没有发现任何填充问题，或者至少不是您所看到的类型。

http://jsfiddle.net/BYQQV/

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

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

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

尽管 IE 对此并不满意。但供以后参考。

于 2013-01-29T21:39:35.653 回答
0

缺少 .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）

好的，我可以看到你想要什么.. 遗憾的是，你将无法通过这种方式实现你想要的，因为'子弹和第一个字符之间的填充是'浏览器特定的'并且无法通过 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，在寻求帮助之前尝试多搜索一下 --> CSS: Control space between bullet and <li>

于 2013-01-29T22:49:23.423 回答