HTML / CSS：将列表填充重置为默认值答案

【问题标题】：HTML / CSS : Reset List Padding to DefaultHTML / CSS：将列表填充重置为默认值
【发布时间】：2011-07-30 11:40:23
【问题描述】：

我正在使用*{margin:0; padding:0;}，这是第一次让我在某些事情上崩溃。 列表内边距和边距也为 0，因此缩进丢失了。我想将它们重置为原始状态，这怎么可能？

我试过这个没有成功：

ul,ol{ 
   margin :auto; /* This Works */
   padding:auto; /* This Not :( */
}

那么我应该如何解决这个问题？

【问题讨论】：

您为什么希望padding:auto 工作？
如果它也适用于保证金，为什么不呢？
你能比“列表损坏”更具体吗？
当然，抱歉如果令人困惑，我编辑了问题。

标签： html css html-lists padding

【解决方案1】：

重置的目的是消除由于浏览器默认设置造成的变化。换句话说，没有明确的方法可以“取消重置”，因为不同的浏览器可能有不同的默认值。

但是，您可以选择自己的默认值，我认为这就是您在这里尝试做的事情。

执行此操作的一个好方法是查看浏览器的默认样式表（您应该能够通过搜索找到如何执行此操作）。例如，您可以通过以下 URL 查看 Firefox 默认样式表：resource://gre/res/html.css

【讨论】：

该 URL 不再对我有效，但 here 是 mozillas 网站上样式表的链接（取自 this SO question）。

【解决方案2】：

没有办法恢复默认值，但是改变 'ol' 或 'ul' 和 'li' 的填充看起来会很好。这对我有用..

ol{
    padding: 0 25px;
}
ol li{
    padding-left: 0px;
}

【讨论】：

【解决方案3】：

如果您使用下面的 sn-p，您可以看到，列表 padding-left 的 initial 值为 0。我的观点是关于你的陈述：

我想将它们重置为原始状态

我试图说明的以及@jdigital 在他的回答中的意思是 CSS 属性没有原始状态，它们都依赖于它们的浏览器实现，例如默认浏览器样式表。

ul {
  outline: 1px solid coral;
  list-style: none;
  padding-left: 48px;
}

li {
  outline: 1px solid lightseagreen;
}

ul {
  padding-left: initial;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
<ul>

【讨论】：

【解决方案4】：

如果我理解正确，您可以尝试添加!important;，如下所示：

ul, ol {
   margin : auto;
   padding: auto !important;
}

通常，它会覆盖所有之前的预定义值。

【讨论】：

然而，使用 !important 有它的陷阱。它最终可能会覆盖嵌套元素或使您的 CSS 复杂化。谨慎使用。
auto 不是padding 属性的有效值...无论您是否将!important 添加到它，它都会被浏览器忽略，例如什么都不做！