我的默认 CSS 将一堆值重置为零，最适用于这个问题，它确实 ol, ul, li {margin: 0;padding: 0;}
我现在需要一个典型的无序列表，其中的元素符号和文本可以换行并在换行的文本上保持相同的缩进。我发现了一堆与该主题相关的帖子( How to keep indent for second line in ordered lists via CSS? ， li ul li is too long, line wraps but no indention )，但后来发现我的问题的原因是将填充和边距重置为零!
如何在重置为零后恢复无序列表的 CSS，以便每个元素符号后的文本在一列中对齐？下面是我的尝试，但它只适用于 FireFox。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing</title>
<style type="text/css">
ol, ul, li {margin: 0;padding: 0;} /* Default reset */
ul {
width:300px;
margin: 1em 0;
-moz-padding-start: 40px;
}
</style>
</head>
<body>
<ul>
<li>
omnis ab quasi voluptatem voluptatem consequuntur sed fugit beatae veritatis sed quae dolores iste quasi ipsam ipsam, perspiciatis sed inventore eaque totam inventore sed ut sit dolores perspiciatis inventore ipsa totam ipsam ipsam,
</li>
<li>
et consequuntur error totam quia ipsa odit aspernatur accusantium vitae ipsam ipsam, enim voluptatem eaque ratione vitae ipsam qui odit ratione enim ipsa ipsa natus quae laudantium quae rem
</li>
<li>
nemo ab ratione sunt sit rem magni sit fugit unde unde, inventore magni magni ab qui eos ab natus sunt nemo ab fugit
</li>
<li>
omnis error rem enim ipsam ipsam, perspiciatis qui eos inventore laudantium vitae quasi voluptas eaque aut error vitae voluptatem consequuntur aspernatur consequuntur inventore fugit qui ipsa ipsa, quia
</li>
<li>
ipsa ipsam ipsam illo explicabo sit vitae vitae, qui doloremque quae aspernatur aperiam beatae ratione ut aperiam sed dicta qui ipsam ipsa voluptatem voluptatem, error ratione aut rem ipsa
</li>
<li>
omnis ab quasi voluptatem voluptatem consequuntur sed fugit beatae veritatis sed quae dolores iste quasi ipsam ipsam, perspiciatis sed inventore eaque totam inventore sed ut sit dolores perspiciatis inventore ipsa totam ipsam ipsam,
</li>
<li>
et consequuntur error totam quia ipsa odit aspernatur accusantium vitae ipsam ipsam, enim voluptatem eaque ratione vitae ipsam qui odit ratione enim ipsa ipsa natus quae laudantium quae rem
</li>
<li>
omnis ab quasi voluptatem voluptatem consequuntur sed fugit beatae veritatis sed quae dolores iste quasi ipsam ipsam, perspiciatis sed inventore eaque totam inventore sed ut sit dolores perspiciatis inventore ipsa totam ipsam ipsam,
</li>
<li>
et consequuntur error totam quia ipsa odit aspernatur accusantium vitae ipsam ipsam, enim voluptatem eaque ratione vitae ipsam qui odit ratione enim ipsa ipsa natus quae laudantium quae rem
</li>
<li>
omnis ab quasi voluptatem voluptatem consequuntur sed fugit beatae veritatis sed quae dolores iste quasi ipsam ipsam, perspiciatis sed inventore eaque totam inventore sed ut sit dolores perspiciatis inventore ipsa totam ipsam ipsam,
</li>
<li>
et consequuntur error totam quia ipsa odit aspernatur accusantium vitae ipsam ipsam, enim voluptatem eaque ratione vitae ipsam qui odit ratione enim ipsa ipsa natus quae laudantium quae rem
</li>
<li>
omnis ab quasi voluptatem voluptatem consequuntur sed fugit beatae veritatis sed quae dolores iste quasi ipsam ipsam, perspiciatis sed inventore eaque totam inventore sed ut sit dolores perspiciatis inventore ipsa totam ipsam ipsam,
</li>
<li>
et consequuntur error totam quia ipsa odit aspernatur accusantium vitae ipsam ipsam, enim voluptatem eaque ratione vitae ipsam qui odit ratione enim ipsa ipsa natus quae laudantium quae rem
</li>
<li>
omnis ab quasi voluptatem voluptatem consequuntur sed fugit beatae veritatis sed quae dolores iste quasi ipsam ipsam, perspiciatis sed inventore eaque totam inventore sed ut sit dolores perspiciatis inventore ipsa totam ipsam ipsam,
</li>
<li>
et consequuntur error totam quia ipsa odit aspernatur accusantium vitae ipsam ipsam, enim voluptatem eaque ratione vitae ipsam qui odit ratione enim ipsa ipsa natus quae laudantium quae rem
</li>
</ul>
</body>
</html>
最佳答案
您的代码仅适用于 firefox，因为您只为 padding-start 使用 -moz- 前缀。
例如，添加 -webkit- 前缀 -webkit-padding-start: 40px; 让您在 Chrome 中也能正常工作。
添加以下内容将涵盖更多内容:
ul {
width:300px;
margin: 1em 0;
-moz-padding-start: 40px;
-webkit-padding-start: 40px;
-ms-padding-start: 40px; /* IE does not supported it so -ms- prefix is redundant */
padding-start: 40px;
}
DEMO - 添加其他浏览器的前缀
如果您觉得使用已经标准化的 CSS 更舒服，当然也可以使用 padding-left: 40px。
DEMO - 使用已经标准化的 CSS:padding-left: 40px
padding-start 是 mozilla 扩展的一部分，因此有 -moz- 前缀。
根据their documentation padding-start 仅在基于 Firefox 和 webkit 的浏览器(例如 Safari 和 Chrome)中受支持。
绝对不像跨浏览器标准。
关于html - 重置为零后恢复无序列表的CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23860121/