如何使无序列表中的点和文本之间的距离变小？

Question

我使用列表样式图像显示无序列表的点。它们出现在离文本稍远的地方，我想让列表文本和点之间的距离略微减少。我尝试过填充和边距，但似乎没有任何效果。有人可以提出建议。

Answer 1

您可以在<li>上尝试使用否定text-indent：

li {
    text-indent: -5px;
}

例如：http://jsfiddle.net/ambiguous/QgNxw/

浏览器支持可能有点狡猾（例如，Opera和WebKit不会以相同的方式呈现它）。您也可以尝试使用:before pseudo-element添加自己的项目符号：

.closer {
    list-style-type: none;
}
.closer:before {
    content: '•';
    margin-right: 3px;
}

例如：http://jsfiddle.net/ambiguous/eXxzH/

但是，对于不理解:before的浏览器，您会遇到问题;但除IE7 and older understand :before以外的所有人都可能不是问题。

如果CSS3没问题，您可以使用::marker pseudo-element执行某些操作。

对于如何呈现列表项的项目符号，没有太多细粒度的控制。

Answer 2

试试这个

HTML：

• hi wolrd
• 123
• 付费
• 见到你

的CSS：

ul {
margin:0px;
padding:0px;
}
ul li{ padding:0 0 0 10px; background:url(...) 0px 6px no-repeat; list-style-type:none;}

Answer 3

您可以将div放在li元素中，并将左边距设置为负值：

li > div {
    margin-left:-4px;
}

Answer 4

我知道这篇文章确实很老，但是您可以使用list-style-position: inside，然后在列表本身上添加所需的填充或边距。