Html 删除有序列表的左间距（OL）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10990064/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove the left spacing of an ordered list (OL)
提问by Alan
By default, the ordered list looks like this:
默认情况下，有序列表如下所示：
There are some spacing on the left hand side of the list. Is there any way to remove those spacing?
列表左侧有一些间距。有什么办法可以消除这些间距吗？
Here is what I want:
这是我想要的：
On my website, the font-family and font-size will be changed by users dynamically. Therefore I am not able to preset padding-left.
在我的网站上，用户会动态更改字体系列和字体大小。因此我无法预设 padding-left。
回答by Tim Hobbs
You should be able to use em for a scalable size (rather than fixed px sizing). This would allow scaling of the font size but match the scaled size when applying padding.
您应该能够将 em 用于可缩放的尺寸（而不是固定的 px 尺寸）。这将允许缩放字体大小，但在应用填充时匹配缩放后的大小。
ol { padding-left: 1.8em; }
Here is a jsfiddleto illustrate. Change the bodyfont-size to different scaled sizes (try 1em, 2em, etc.) and you'll see the paragraph matches the olon the left.
这是一个jsfiddle来说明。将body字体大小更改为不同的缩放大小（尝试 1em、2em 等），您将看到该段落与ol左侧的匹配。
You may find that browsers render at different sizes. 1.8e, works with Chrome, but it may require 1.6em or 1.9em for Firefox or IE. The thing with the web is it is fluid and scalable, so shooting for pixel precision, especially when working with user-scalable fonts is almost always a no-win situation.
您可能会发现浏览器以不同的尺寸呈现。1.8e，适用于 Chrome，但对于 Firefox 或 IE 可能需要 1.6em 或 1.9em。网络的特点是流畅且可扩展，因此追求像素精度，尤其是在使用用户可扩展的字体时，几乎总是双赢的局面。
回答by alex
On my website, the
font-familyandfont-sizewill be changed by users dynamically. Therefore I am not able to presetpadding-left.
在我的网站上，
font-family和font-size将由用户动态更改。因此我无法预设padding-left.
Why would that stop you from using padding-left? It's absolutely the right tool to use when you want to override the browser's default stylesheet.
为什么这会阻止你使用padding-left？当您想要覆盖浏览器的默认样式表时，它绝对是正确的工具。
ul {
padding-left: 0;
/* If you want you can change the list type from inside or outside */
list-style: inside decimal;
}
回答by Jukka K. Korpela
ol, ol li { margin-left: 0; padding-left: 0; }
ol { margin-left: 1.3em; }
The default spacing on the left may be caused by left padding or left margin of olor li, or a combination thereof (depending on browser). So to get some specific spacing, set all those properties to zero except one of them, which you set to the value you prefer. Note that this spacing needs to be large enough for the list markers (numbers), otherwise they won't appear or will be truncated. The value of 1.3em(i.e., 1.3 times the font size) should be suitably large for them and leave little or no extra space on the left of them.
默认间隔左侧可以通过左填充或左边距引起ol或li它们的组合（取决于浏览器），或。因此，要获得一些特定的间距，请将所有这些属性设置为零，除了其中一个，您将其设置为您喜欢的值。请注意，对于列表标记（数字），此间距需要足够大，否则它们将不会出现或将被截断。的值1.3em（即字体大小的 1.3 倍）应该对它们适当大，并且在它们的左侧几乎没有或没有多余的空间。
回答by Praveen Kumar Purushothaman
Yes, by default it would be 40px. Use CSS:
是的，默认情况下它是 40px。使用 CSS：
ul {padding-left: 1.5em; list-style: decimal;}
回答by TzeMan
If you want to ensure your list is flush with the left boundary of its parent container, use your own list bullet image.
如果您想确保您的列表与其父容器的左边界齐平，请使用您自己的列表项目符号图像。
You can use the following CSS to customize your ULs:
您可以使用以下 CSS 来自定义您的 UL：
UL {
margin-left: 0;
list-style: none outside url("myImage.png");
}
Hope this helps! :)
希望这可以帮助！:)
