这个应该可以了。一定要把子弹对准外面。你也可以使用CSS伪元素，如果你可以在IE7中向下放置它们。我真的不推荐使用伪元素来做这种事情，但它确实可以控制距离。

ul { list-style: circle outside; width: 100px; } li { padding-left: 40px; } .pseudo, .pseudo ul { list-style: none; } .pseudo li { position: relative; } /* use ISO 10646 for content http://la.remifa.so/unicode/named-entities.html */ .pseudo li:before { content: '\2192'; position: absolute; left: 0; } <ul> <li>Any Browser really</li> <li>List item <ul> <li>List item</li> <li>List item</li> </ul> </li> </ul> <ul class="pseudo"> <li>IE8+ only</li> <li>List item <ul> <li>List item with two lines of text for the example.</li> <li>List item</li> </ul> </li> </ul>

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

总结一下这里的其他答案-如果你想在<li>列表项中更好地控制项目符号和文本之间的空格，你的选项是:

(1)使用背景图片:

<style type="text/css">
li {
    list-style-type:none;
    background-image:url(bullet.png);
}
</style>

<ul>
    <li>Some text</li>
</ul>

优点:

你可以用你想要的任何图像来做子弹 你可以使用CSS background-position将图片定位到与文本相关的任意位置，使用像素，ems或%

缺点:

向页面添加一个额外的(尽管很小)图像文件，增加页面的重量 如果用户增加了浏览器上的文本大小，项目符号将保持原来的大小。随着文本大小的增加，它也可能会进一步偏离位置 如果你正在开发一个“响应式”布局，只使用百分比作为宽度，那么在一定的屏幕宽度范围内将子弹头精确地放置在你想要的位置可能会很困难

2. 在<li>标签上使用填充

<style type="text/css">
ul {padding-left:1em}
li {padding-left:1em}
</style>

<ul>
    <li>Some text</li>
</ul>

优点:

No image =少下载1个文件 通过调整<li>上的填充，您可以在项目符号和文本之间添加任意多的额外水平空间 如果用户增加了文本大小，间距和项目符号大小应该按比例缩放

缺点:

不能移动子弹更接近文本比浏览器默认 仅限于CSS内置项目符号类型的形状和大小 子弹的颜色必须与文本相同 无法控制子弹的垂直位置

(3)将文本包装在一个额外的<span>元素中

<style type="text/css">
li {
    padding-left:1em;
    color:#f00; /* red bullet */
}
li span {
    display:block;
    margin-left:-0.5em;
    color:#000; /* black text */
}
</style>

<ul>
    <li><span>Some text</span></li>
</ul>

优点:

No image = 1 less file to download You get more control over the position of the bullet than with option (2) – you can move it closer to the text (although despite my best efforts it seems you can't alter the vertical position by adding padding-top to the <span>. Someone else may have a workaround for this, though...) The bullet can be a different colour to the text If the user increases their text size, the bullet should scale in proportion (providing you set the padding & margin in ems not px)

缺点:

需要额外的非语义元素(这可能会让你在SO上失去更多的朋友，而不是在现实生活中;)但对于那些希望他们的代码尽可能精简和高效的人来说，这是令人讨厌的，并且它违反了HTML / CSS应该提供的表示和内容的分离) 无法控制子弹的大小和形状

这里希望CSS4中有一些新的列表风格的功能，这样我们就可以创建更智能的项目符号，而不需要借助图像或额外的标记。

似乎您可以(在某种程度上)使用<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>

对于list-style-type: inline:

它几乎和DSMann8的答案一样，但css代码更少。

你只需要

<style>
    li:before {
        content: "";
        padding-left: 10px;
    }
</style>

<ul>
    <li>Some content</li>
</ul>

干杯

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

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

而且，它确实有效!

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

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

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

来源:CSS字符转义序列