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

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

似乎您可以(在某种程度上)使用<li>标记上的填充来控制间距。

<style type="text/css">
    li { padding-left: 10px; }
</style>

问题是，它似乎不允许你像最后一个例子那样舒适地挤压它。

为此，您可以尝试关闭list-style-type并使用&bull;

<ul style="list-style-type: none;">
    <li>&bull;Some list text goes here.</li>
</ul>

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

在提供不同的解决方案之前，让我们试着更好地理解浏览器实现。如果我们看一下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.)

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

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

我99.9999%确定没人在乎这个问题，因为这个问题12年前就有人问过了，但我现在需要解决这个问题，以下是我的发现:

后面的空格被视为转义的一部分，因此如果您确实想在转义字符后面加上一个空格，请使用2个空格。

而且，它确实有效!

ul.asterisks {
  list-style-type: '\2731\ ';
}

来源:在标记和CSS中使用字符转义

附注:也许这是因为我做这个工作太久了，我已经失去理智了?在浏览器的dev视图中插入空格。为了获得空间，我必须逃离空间??(见上图)。疯狂。(顺便问一下，为什么这些页面都是2010年的?2010年发生了什么?等一下……12年前的2010年。:恐惧:)

来源:CSS字符转义序列