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

Question

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

我已经尝试过但没有成功：

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

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

Answer 1

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

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

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

Answer 2

无法恢复默认值，但更改“ol”或“ul”和“li”的填充看起来不错。这对我有用..

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

Answer 3

正如您所看到的，如果您使用下面的代码片段，列表 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>

Answer 4

重置填充和边距时必须记住，例如 *{padding: 0;边距：0;}。 ul 标记有一些填充，如 padding-inline-start: default_value;。

通过以下这些步骤，您可以摆脱这个 list-style-position: Outside; 问题：

• 首先找出 padding-inline-start open 的默认值您的浏览器开发人员工具并选择您的 ul 标签。
• 在“元素”选项卡下方或旁边的“样式”选项卡中（取决于您打开的开发人员工具的分辨率）滚动并从“用户代理样式表”中找到“ul”标签样式，它将看起来像这样
• 正如您在我的浏览器中看到的 padding-inline-start 样式，其值是 40px。现在记下这个值。
• 然后转到您最喜欢的代码编辑器，并在其中设置特定 ul 的样式，例如 ul{padding-inline-start: 40px}
• 不要忘记删除我们在开始时所做的评论是为了在重置边距和填充时查看效果

希望这对您有用。

Answer 5

revert 就是您正在寻找的内容。它基本上会恢复由您的样式表创建的任何样式，而不是用户代理/浏览器样式表。

ol, ul, li, {
 margin: revert;
 padding: revert; /* Padding is what gives the indentation */ 
} 

参考：

• 在 CSS MDN 文档中恢复
• 什么是样式起源

Answer 6

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

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

通常，它会覆盖所有早期的预定义值。