Question

我是CSS的新手，我接管了某人的CSS代码：

.. CSS Reset .. ul, ol, li .. {
   ..
   margin: 0;
   padding: 0;
   ..
}

但是，将padding设置为0可以有效地禁用自动列表项缩进，但我想缩进，所以我写道：

<ul style="padding: 10;">
    <li style="padding: 10;">
        <ul style="padding: 10;">
            <li  style="padding: 10;">123</li>
        </ul>
    </li>
</ul>

padding: 10没有任何效果，浏览器仍然没有显示填充，因此没有缩进。

如何恢复自动缩进？

Answer 1

朋友，填充值为10px而不是10。

 <li  style="padding: 10;">123</li>

应该是

 <li  style="padding: 10px;">123</li>

干杯，

Answer 2

您可以从用户代理样式表或称为浏览器样式表获取填充。您的用户样式表会覆盖此内容。您需要从css样式规则中删除ol，ul，li选择器，该规则告诉这些元素它们没有应用填充或边距。这也是我第一次看到padding: auto真的有可能吗？

Answer 3

如果你必须使用其他人使用CSS重置的CSS，那么你只需要自己设置所有的样式。因此，如果您希望列表具有一些缩进，则需要自己创建它们，并且您可能需要在要受影响的列表元素上使用class或id属性。

一般情况下，当您使用CSS重置覆盖它时，无法恢复浏览器的默认样式。您只能显式覆盖覆盖。假设您有<ul class=foo>，以便您希望该列表及其中的所有ul列表都有缩进，您可以设置

ul#foo, ul#foo ul { padding-left: 40px }

根据HTML5 CR建立“预期的”默认缩进。这与典型的浏览器默认值相当，但实际默认值可能仍然不同。

如果你不希望建立一些预期与默认值相匹配的东西但是有一些合理的缩进，你可以使用em单位，它适应字体大小，并使用相对较小的值：

ul#foo, ul#foo ul { padding-left: 1.3em }

如何在列表和列表项中启用自动缩进？

3 个答案: