自定义 html 项目符号点不显示，只有普通项目符号点不显示我输入的自定义图像答案

【问题标题】：Custom html bullet points not showing, only normal bullet points show not the custom image i put in自定义 html 项目符号点不显示，只有普通项目符号点不显示我输入的自定义图像
【发布时间】：2021-08-24 09:58:48
【问题描述】：

我已经加入了自定义 CSS 以确保自定义项目符号点 IMG 显示在我的 ul 和 li 上。 IMG 未显示，仅显示默认项目符号点，我所做的任何更改均无济于事。它要么导致一切扭曲，要么什么都没有发生。

如果可以，请告知。

代码如下：

ul {
  list-style-position: inside;
  padding-left: 2rem;
  list-style-type:  !important;

} */



ul li {

  padding-left: 2rem;
  list-style-image: url(<img src="https://i.ibb.co/Tk59zVR/bullet-2.png" alt="bullet-2" border="0">);
  background-position: 0 0;
  background-size: 0

  
}

 <p class="section-subtitle">
          <ul>
            <li>Savings on running costs/in-house labour costs</li>
            <li>Allows you to stay focused on your core-business without distractions. </li>

            <li>Reduce risk – government regulations non-compliance fines</li>

            <li>Level the playing field – get access to the similar technology and expertise that big companies enjoy
            </li>
          </ul>
          </p>

【问题讨论】：

标签： html css html-lists

【解决方案1】：

必须为ul 定义 list-style-image，并且未正确使用img 源。

ul {
  list-style-position: inside;
  padding-left: 2rem;
  /*you probably do not need this*/
  /*list-style-type: !important;*/
  list-style-image: url("https://i.ibb.co/Tk59zVR/bullet-2.png");
}

ul li {
  padding-left: 2rem;
  /*you probably do not need this*/
  /*background-position: 0 0; */
  /*background-size: 0*/
}

<p class="section-subtitle">
  <ul>
    <li>Savings on running costs/in-house labour costs</li>
    <li>Allows you to stay focused on your core-business without distractions. </li>

    <li>Reduce risk – government regulations non-compliance fines</li>

    <li>Level the playing field – get access to the similar technology and expertise that big companies enjoy
    </li>
  </ul>
</p>

【讨论】：

【解决方案2】：

list-style-image 应该只包含图像的路径。您正在使用浏览器未知的列表样式图像编写 HTML。

你应该像这样使用 list-style-image：

ul {
  list-style-position: inside;
  padding-left: 2rem;
  list-style-image: url("https://i.ibb.co/Tk59zVR/bullet-2.png") !important;
}

【讨论】：