CSS列表样式类型不工作

4jb9z9bj 于 2023-01-10 发布在其他

关注(0)|答案(7)|浏览(177)

我已经在CSS中设置了list-style-type，但由于某种原因，它没有显示。

body {
  margin: 0;
}
ol {
  list-style-type: decimal;
  padding-left: 0;
}

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

7条答案

由于您的填充重置，数字实际上偏离页面左侧。请尝试添加：

list-style-position: inside;

display:list-item;
list-style-position:outside;

如果列表display:属性设置为display:list-item;以外的其他属性，则可能会给予问题

十进制是“ol”的默认值。不需要声明它。而且数字在那里只是从页面的一边掉下来，即不可见。调整你的填充，并摆脱多余的声明。See here

如果这些都不起作用，请确保您没有显式标记为显示块的元素在LI内。它刚刚发生在我身上，与一个H4A设置为块在LI内。我正要辞职😳

在我的例子中，它不适用于<ul>。
我怀疑这可能是因为我使用的CSS重置文件。
我按照上面的建议设置了ul { display:list-item; }，它工作得很好。
检查是否正在使用任何重置文件。它们有时可能会很棘手。

只需删除“显示：从li元素中阻止;”

更改<li>的属性而不是<ol>的属性对我很有效。

ol > li {
  padding: 0;
  display:list-item;
  list-style-type: 'disc';
}