如何为HTML中所有ul、ol列表项设置统一的自定义图片图标？

问题原因 #

你当前的代码存在两处错误导致效果不符合预期：

1. background-image属性绑定在了ul容器上，只会为整个列表容器渲染一张背景图，不会给每个列表项单独生成标记
2. ol标签既没有配置背景图，也没有清除默认的数字列表样式，无法显示自定义图片标记

修复代码 #

CSS部分

/* 公共配置：统一清除ul、ol默认列表样式，设置左侧内边距 */
ul, ol {
  list-style: none;
  padding-left: 32px;
}
/* 单独配置有序/无序列表的字体大小 */
ol {
  font-size: 25pt;
}
ul {
  font-size: 20pt;
}
/* 给所有列表项设置统一的自定义图片标记 */
ul li, ol li {
  background-image: url('flash.png');
  background-repeat: no-repeat;
  /* 调整图片位置为左侧垂直居中，可根据实际需求修改数值 */
  background-position: left center;
  /* 根据图片实际宽度调整左侧内边距，避免文字覆盖图片 */
  padding-left: 28px;
}

HTML部分无需修改，保持原有结构即可

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JS</li>
</ol>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JS</li>
</ul>

如果图片显示位置不符合预期，调整background-position的偏移值即可；如果图片显示不全，可给li设置和图片高度匹配的line-height属性。

内容的提问来源于stack exchange，提问作者Mujtaba Saberi