Css 如何修改项目符号与其列表文本之间的间距？

我想缩小项目符号与其html文本之间的差距

比如我有

• 这是文本

---

如何使用css增加或减少项目符号和文本之间的间距？

您可以通过在

元素上设置填充使其变大：

<ul >
    <li style="padding-left:20px;">test</li>
    <li>test 2 </li>
</ul>

测试
测试2

---

我还不知道如何使它变小，负值似乎没有效果。

您可以通过在

元素上设置填充来使它变大：

<ul >
    <li style="padding-left:20px;">test</li>
    <li>test 2 </li>
</ul>


测试
测试2


我还没有弄清楚如何使它变小，负值似乎没有效果。
我能够实现这一点的唯一方法[减少li的本机浏览器渲染间距]是向
li
添加额外的标记并设置负边距

例如：

标记：

<ul>
    <li>
        <span>This is the text</span>
    </li>
</ul>

对于这样一个小的需求，这可能会添加相当多的额外的不必要的标记。您最好在
li
元素上使用背景图像，这样可以提供更好的位置控制，而无需所有额外的标记。
我能够实现这一点的唯一方法[减少li的本机浏览器渲染间距]是向
li
添加额外的标记并设置负边距

例如：

标记：

<ul>
    <li>
        <span>This is the text</span>
    </li>
</ul>

对于这样一个小的需求，这可能会添加相当多的额外的不必要的标记。最好在
li
元素上使用背景图像，这样可以提供更好的位置控制，而无需所有额外的标记。
使用文本缩进和负值，如下所示：

li {text-indent:-8px}

使用带有负值的文本缩进，如下所示：

li {text-indent:-8px}

我就是这样解决的

如果您的列表样式是
内
，那么您可以删除项目符号并创建自己的。。。e、 g.（在scss中！）

li{
列表样式：无；
&：之前{
内容:'一';；
}
}

如果您将样式列为
外部
，则可以执行以下操作：

li{
左侧填充：10px；
列表样式：无；
&：之前{
内容：“*”；/*使用您喜欢的任何字符~*/
位置：绝对位置；
左边距：-10px；
}
}

这种方法的优点是，您不会得到更复杂的HTML，而且/
组合是开箱即用的。
我就是这样解决这个问题的

如果您的列表样式是
内
，那么您可以删除项目符号并创建自己的。。。e、 g.（在scss中！）

li{
列表样式：无；
&：之前{
内容:'一';；
}
}

如果您将样式列为
外部
，则可以执行以下操作：

li{
左侧填充：10px；
列表样式：无；
&：之前{
内容：“*”；/*使用您喜欢的任何字符~*/
位置：绝对位置；
左边距：-10px；
}
}

这种方法的优点是，您不会得到更复杂的HTML，而且/
组合是开箱即用的。
这很好，但不幸的是，如果文本长度超过1行，它只适用于第一行。根据我的经验，这也会移动子弹，因此您无法实现目标。这很好，但不幸的是，如果文本长度超过1行，它只适用于第一行。根据我的经验，这也会移动子弹，因此你无法实现你的目标