如果你的列表样式是在里面，那么你可以删除子弹并创建你自己的…例:(在scss!)

            li {
                list-style: none;
                &:before {
                    content: '- ';
                }
            }

如果你的列表样式是外部的，那么你可以这样做:

            li { 
                padding-left: 10px;
                list-style: none;
                &:before {
                    content: '* '; /* use any character you fancy~! */
                    position: absolute;
                    margin-left: -10px;
                }
            }

下面是另一个使用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
    }

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

老问题了，但是: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>

干杯!

老问题了，但仍然相关。 我建议使用负文本缩进。 List-style-position必须在外部。

优点:

子弹自动定位正确 改变字体大小不会破坏项目符号的位置 没有额外的元素(也没有::伪元素) 适用于RTL和LTR而不改变CSS。

缺点:

试一试 来 找到 一:)

如果你的列表样式是在里面，那么你可以删除子弹并创建你自己的…例:(在scss!)

            li {
                list-style: none;
                &:before {
                    content: '- ';
                }
            }

如果你的列表样式是外部的，那么你可以这样做:

            li { 
                padding-left: 10px;
                list-style: none;
                &:before {
                    content: '* '; /* use any character you fancy~! */
                    position: absolute;
                    margin-left: -10px;
                }
            }

当您希望将文本移动到更靠近项目符号的位置时，即使您有多行文本，以下解决方案也很有效。

右边距使您可以将文本移动到更靠近项目符号的位置

文本缩进确保多行文本仍然正确对齐

李:{之前 内容:“”; margin-right: 5 px;/*调整使文本更靠近项目符号*/ ｝ 李{ indent: 5 px;/*对齐文本的第二行*/ ｝ < ul > <li> Item 1…李< / > <li> Item 2…这个项目有大量的文本，导致第二行!请注意，第二行是如何与第一行对齐的!李< / > <li> Item 3…李< / > < / ul >