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

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

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

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

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

您可以使用ul li:before和背景图像，并分别将position: relative和position:absolute分配给li和li:before。通过这种方式，您可以创建一个图像，并将其定位到任何您想要相对于li的位置。

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

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