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

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

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

如果你的列表样式是在里面，那么你可以删除子弹并创建你自己的…例:(在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;
                }
            }

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

对于list-style-type: inline:

它几乎和DSMann8的答案一样，但css代码更少。

你只需要

<style>
    li:before {
        content: "";
        padding-left: 10px;
    }
</style>

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

干杯

ul
{
list-style-position:inside;
} 

定义和用法

list-style-position属性指定列表项标记应该出现在内容流内部还是外部。

来源:http://www.w3schools.com/cssref/pr_list-style-position.asp