可以在列表项上使用padding-left属性(而不是在列表本身上!)。

把它的内容放在一个相对定位的span中，然后你可以通过span的left属性来控制空间。

李跨度{ 位置:相对; 左:-10 px; } < ul > <李> < span >第1项< / span > < /李> <李> < span >第二项< / span > < /李> <李> < span >项3 < / span > < /李> < / ul >

如果你只想减少项目符号和文本之间的间距，似乎有一个更干净的解决方案:

li:before {
    content: "";
    margin-left: -0.5rem;
}

有趣的是，当我们面对这样的问题时，我们大多数人都会使用边距、填充和/或位置属性。我知道我以前是这样的。如果我们都看错了呢?

在提供不同的解决方案之前，让我们试着更好地理解浏览器实现。如果我们看一下WebKit中列表的用户代理样式表，我们会发现:

ul, menu, dir {
    //...
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 40px;
}

ol {
    //...
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 40px;
}
li {
    display: list-item;
    text-align: match-parent;
}

其他浏览器也类似。列表缩进由ul和ol的填充提供，而不是li。同样值得注意的是，在任何地方都找不到负定位、空白或缩进。那么是什么造成了子弹和文字之间的差距呢?

只有当我们尝试改变项目符号本身时，答案才会变得清晰。我将使用list-style-type属性来做到这一点，但不是给它一个像disc这样的标准值(它的定义由浏览器决定，在规范中有点模糊)，我将给它一个带引号的字符串值:

申{ list-style-type:●; 的 <德> < li >哦亲爱的< / li > < li > < / li >发生了什么事 <li>到子弹发射器?< / li > < /德>

我们可以通过在项目符号后面添加一个标准空格字符来重新引入空格。”

ul。custom-bulleted { List-style-type:“•”; ｝ < ul类= " custom-bulleted " > <li>啊，好多了 <li>我从来不喜欢粘性子弹 < / ul > < ul > <li>我是一个无风格的列表 我从来没有那个问题!李< / > < / ul >

我只能假设这类似于浏览器内部所做的事情——在项目符号之后插入空格，并基本上将整个内容浮动到每一里的最左边。实际上，规范通过将默认的内部实现与@counter-style at-rule进行比较来证实这一点，@counter-style at-rule允许我们定义自己的列表类型:

下面的样式表片段提供了的规范定义 这些预定义的计数器样式: @反风格光盘{ 系统:循环; 符号:\ 2022; /*•*/ 后缀:" "; ｝

空格就在后缀中。

There's one unanswered question though… Why does the unstyled list look different to the custom-bulleted class in my example? Again, it seems to come down to each browser's different internal implementation. If you compare them in different browsers, even the custom bullets vary between browsers. What I have found though, is that you can standardise the appearance of a string list-style-type simply by declaring a font-family on li::marker, a feature that wasn't available to us when this question was originally asked.

所以，回到最初的问题，如果我们想控制项目符号和li之间的空格，我们可以通过改变空白字符的宽度，或者通过使用基于字符串的list-style-type添加多个空白字符来实现，这得到了广泛的浏览器支持。或者，我们可以使用@counter-style定义一个自定义列表样式，但Safari目前不支持这种样式。

Unicode为我们提供了大量的空白字符供我们选择。以下是使用Em Space (U+2003)的列表:

ul { list-style-type:“002003•\”; ｝ < ul > 我喜欢大差距，我不能说谎 你们这些兄弟不能否认 < / ul >

I know this approach is not the first one that springs to mind. We've been so used to aligning things with margins, padding and indents that we tend to reach for those tools every time. But in many ways, the browser's way makes sense. What could be simpler than indenting the whole list with a single padding declaration on the ul, and letting the bullet take care of itself? (Maybe one day, the li::marker pseudo-element will support padding, for those who reckon they need even more fine-grained control. I won't be holding my breath though.)

在li上使用文本缩进效果最好。

文本缩进:-x px;会让子弹更靠近李，反之亦然。

在IE的旧版本中，在负左边使用相对span可能无法正常工作。 附注:尽量避免给出职位。

您可以使用ul li:before和背景图像，并分别将position: relative和position:absolute分配给li和li:before。通过这种方式，您可以创建一个图像，并将其定位到任何您想要相对于li的位置。