减少列表项目中项目符号和文本之间的距离

问题描述

如何减小<li>中项目符号和文本之间的默认间距?

How can I reduce default gap between bullet and text in an <li>?

• 第1项
• 第2项
• 第3项

我想缩小子弹和我"之间的距离.

I want to reduce gap between the bullet and "I".

推荐答案

您可以通过将list-style-type设置为none，并将list元素的background-image设置为通用项目符号来实现此目的，如下所示:

You could achieve this by setting the list-style-type to none, and setting the background-image of a list element to a generic bullet, like so:

ul {
    list-style-type: none;
}

li {
    background-image: url(bullet.jpg);
    background-repeat: no-repeat;
    background-position: 0px 50%;
    padding-left: 7px;
}

结果看起来像这样:

使用这种方法，您不会在列表中添加不必要的span(或其他)元素，可以说这更加实用(出于以后的可扩展性和其他语义原因).

With this approach, you aren't adding unnecessary span (or other) elements to your lists, which is arguably more practical (for later extendibility and other semantic reasons).

这篇关于减少列表项目中项目符号和文本之间的距离的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！