html - 如何缩小无序列表中点和文本之间的距离？

Question

我正在使用列表样式图像来显示无序列表的点。它们看起来离文本有点远，我想缩小列表文本和点之间的距离。我试过填充和边距，但似乎没有任何效果。有人可以提出建议吗。

Answer 1

你可以试试否定 text-indent 在 <li> 上:

li {
    text-indent: -5px;
}

例如:http://jsfiddle.net/ambiguous/QgNxw/

浏览器支持可能有点不稳定(例如 Opera 和 WebKit 不会以相同的方式呈现 fiddle )。您也可以尝试使用 :before pseudo-element添加您自己的元素符号:

.closer {
    list-style-type: none;
}
.closer:before {
    content: '•';
    margin-right: 3px;
}

例如:http://jsfiddle.net/ambiguous/eXxzH/

但是你会遇到不理解的浏览器的问题:before ;但除IE7 and older understand以外的所有人:before所以这可能不是问题。

如果 CSS3 没问题，您可以使用 ::marker pseudo-element 做一些事情.

对于如何呈现列表项的元素符号，没有那么细粒度的控制。