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

老问题了，但是:before伪元素在这里工作得很好。

<style>
    li:before {
        content: "";
        display: inline-block;
        height: 1rem;  // or px or em or whatever
        width: .5rem;  // or whatever space you want
    }
</style>

它工作得非常好，不需要太多额外的规则或html。

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

干杯!

使用padding-left: 1 em;文本缩进:<li>标签的-1em。 然后，list-style-position:用于<ul>标记。

<ul style='list-style-position: inside;'>
  <li style='padding-left: 1em; text-indent: -1em;'>Item 1</li>
</ul>

没有人提到::marker属性

它允许将空间设置为小于浏览器默认值。

Ul li::marker { 内容:“•”;/*作为副作用，将空格设置为零*/ 字体:1.2em/1 sans-serif;/*调整子弹大小*/ ｝ Ul li { padding-left: .2em;/*完全控制空格*/ ｝ < ul > <李>一 <李>两个 <李>三 < / ul >

更多信息w3schools ul { list-style:没有; ｝

Ul li::before { 内容:“2022 \”; 颜色:黑色; 显示:inline-block; 宽度:8 px;}

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

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