如何让Materialize框架的列表显示项目符号？

嘿，这个情况我之前折腾过！Materialize默认确实把<ul>和<ol>的项目符号/数字给重置掉了，不过咱们用自定义CSS就能轻松改回常规样式，下面给你两种可行方案：

方案一：全局覆盖所有列表 #

如果希望所有页面的列表都显示常规样式，可以在你的自定义CSS文件里加上这段代码：

/* 恢复无序列表的默认项目符号 */
ul {
  list-style-type: disc;
  padding-left: 2rem; /* 给项目符号留出足够的左侧空间 */
}

/* 恢复有序列表的默认数字编号 */
ol {
  list-style-type: decimal;
  padding-left: 2rem;
}

⚠️ 注意：要确保你的自定义CSS是在Materialize的CSS文件之后引入的，这样你的样式优先级会更高，不用加!important也能覆盖默认设置。如果引入顺序不对，可能需要在属性值后面加上!important强制覆盖。

方案二：仅针对特定列表修改 #

如果不想全局改动，只想让某些列表显示常规样式，可以给这些列表加个自定义类，比如.custom-styled-list：

CSS代码： #

.custom-styled-list ul {
  list-style-type: disc;
  padding-left: 2rem;
}

.custom-styled-list ol {
  list-style-type: decimal;
  padding-left: 2rem;
}

HTML使用示例： #

<ul class="custom-styled-list">
  <li>第一项内容</li>
  <li>第二项内容</li>
</ul>

<ol class="custom-styled-list">
  <li>第一步操作</li>
  <li>第二步操作</li>
</ol>

额外小技巧 #

如果你想要不同样式的项目符号/编号，还可以替换list-style-type的值：

• 无序列表可选：circle（空心圆）、square（方形）
• 有序列表可选：lower-alpha（小写字母a/b/c）、upper-roman（大写罗马数字I/II/III）

内容的提问来源于stack exchange，提问作者Jan Ariel San Jose