11

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

在此处输入图像描述

列表左侧有一些间距。有什么办法可以消除这些间距？

这是我想要的：

在此处输入图像描述

在我的网站上，字体系列和字体大小将由用户动态更改。因此我无法预设 padding-left。

4

5 回答 5

13

在我的网站上，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;
}
于 2012-06-12T03:06:51.390 回答
13

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

ol { padding-left: 1.8em; }

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

您可能会发现浏览器以不同的尺寸呈现。1.8em，适用于 Chrome，但对于 Firefox 或 IE，它可能需要 1.6em 或 1.9em。Web 的特点是它是流动的和可扩展的，因此追求像素精度，尤其是在使用用户可缩放的字体时几乎总是没有双赢的局面。

于 2012-06-12T05:58:44.820 回答
6 
ol, ol li { margin-left: 0; padding-left: 0; }
ol { margin-left: 1.3em; }

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

于 2012-06-12T04:22:59.977 回答
2

是的，默认情况下它将是 40 像素。使用 CSS：

ul {padding-left: 1.5em; list-style: decimal;}
于 2012-06-12T03:05:57.140 回答
1

如果要确保列表与其父容器的左边界齐平，请使用您自己的列表项目符号图像。

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

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

希望这可以帮助！:)

于 2012-06-12T03:25:22.987 回答