删除有序列表的左侧间距（OL）

Question

默认情况下，有序列表如下所示：

列表左侧有一些间距。有没有办法去除那些间距？

这就是我想要的：

在我的网站上，用户会动态更改font-family和font-size。因此我无法预设左侧填充。

Answer 1

您应该能够将em用于可扩展的大小（而不是固定的px大小）。这将允许缩放字体大小，但在应用填充时匹配缩放的大小。

ol { padding-left: 1.8em; }

这是一个jsfiddle来说明。将body字体大小更改为不同的缩放尺寸（尝试1em，2em等），您会看到该段落与左侧的ol匹配。

您可能会发现浏览器以不同的大小呈现。 1.8e，适用于Chrome，但Firefox或IE可能需要1.6em或1.9em。网络上的东西是流畅和可扩展的，所以拍摄像素精度，特别是在使用用户可缩放字体时几乎总是一个不赢的情况。

Answer 2

ol, ol li { margin-left: 0; padding-left: 0; }
ol { margin-left: 1.3em; }

左侧的默认间距可能是由ol或li的左边距或左边距或其组合（取决于浏览器）引起的。因此，要获得一些特定的间距，请将所有这些属性设置为零，除了其中一个属性，您将其设置为您喜欢的值。请注意，此间距对于列表标记（数字）必须足够大，否则它们将不会出现或将被截断。 1.3em的值（即字体大小的1.3倍）应该适合它们，并且在它们的左边留下很少或没有多余的空间。

Answer 3

  

在我的网站上，用户将动态更改font-family和font-size。因此，我无法预设padding-left。

为什么会阻止您使用padding-left？当您想要覆盖浏览器的默认样式表时，它绝对是正确的工具。

ul {
   padding-left: 0;
   /* If you want you can change the list type from inside or outside */
   list-style: inside decimal;
}

Answer 4

是的，默认情况下它是40px。使用CSS：

ul {padding-left: 1.5em; list-style: decimal;}

Answer 5

如果您想确保您的列表与其父容器的左边界齐平，请使用您自己的列表子弹图像。

您可以使用以下CSS来自定义您的UL：

UL {
  margin-left: 0;
  list-style: none outside url("myImage.png");
}

希望这有帮助！ ：）