HTML中ul无序列表 HTML中ul标签项目符号修改-html教程-PHP中文网

直接改list-style-type即可更换ul项目符号，稳定值为disc、circle、square、none；自定义图标需用background-image+list-style:none，颜色大小单独控制须用::before伪元素。

html中ul无序列表 html中ul标签项目符号修改

ul列表的项目符号怎么换

直接改 list-style-type 就行，但得注意浏览器默认值、继承关系和自定义符号的限制。

这个 CSS 属性控制的就是 ul 里每个 li 前面那个点或符号的样式。常见可选值有：disc（实心圆，默认）、circle（空心圆）、square（实心方块），还有 none（彻底去掉）。

写在 ul 上会作用于整个列表；写在 li 上理论上也生效，但不推荐——容易被父级覆盖，且语义不清
如果父容器（比如某个 div）设了 list-style-type，子 ul 会继承，得显式重置
list-style-type 不支持任意图标或图片，只接受预定义关键字；想用自定义图形得换方案

用图片当项目符号要怎么写

靠 list-style-image 或更可靠的 background-image 方案。

list-style-image 看起来最直白，但实际问题多：对图片尺寸没控制权、无法调整位置、IE 低版本兼容差，而且一旦图片加载失败就回退成默认圆点，不可控。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

推荐用 background-image + padding-left + background-position 组合：能精调图标大小、间距、对齐
记得加 background-repeat: no-repeat，否则图标会重复
别忘了给 li 设 list-style: none，否则默认符号和背景图会叠在一起

示例：

li {
  list-style: none;
  background-image: url("arrow.svg");
  background-repeat: no-repeat;
  background-position: 0 0.3em;
  padding-left: 18px;
}