下面是另一个使用css计数器和伪元素的解决方案。我发现它更优雅，因为它不需要使用额外的html标记或css类:

    ol,
    ul {
        list-style-position: inside;
    }
    
    li {
        list-style-type: none;
    }
    
    ol {
        counter-reset: ol; //reset the counter for every new ol
    }
    
    ul li:before {
            content: '\2022 \00a0 \00a0 \00a0'; //bullet unicode followed by 3 non breakable spaces
    }
    
    ol li:before {
            counter-increment: ol;
            content: counter(ol) '.\00a0 \00a0 \00a0'; //css counter followed by a dot and 3 non breakable spaces
    }

我使用不可分割的空格，以便空格只影响列表元素的第一行(如果列表元素超过一行长)。你可以在这里使用填充。

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

干杯

这个应该可以了。一定要把子弹对准外面。你也可以使用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>

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

在提供不同的解决方案之前，让我们试着更好地理解浏览器实现。如果我们看一下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>列表项中更好地控制项目符号和文本之间的空格，你的选项是:

(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中有一些新的列表风格的功能，这样我们就可以创建更智能的项目符号，而不需要借助图像或额外的标记。