list-style-image: url('imageurl') 不在网页上显示图像

Question

你好，我正在尝试通过 css 使用客户图片作为列表标记，这是我的代码

<li class="unorderedList">

    Bread 

    <ul>
        <li> brown </li>
        <li> white </li>

    </ul>

</li>

<li> Milk </li>
<li> Butter </li>
<li> Onions </li>
<li> Coriander </li>

图像没有作为我的列表标记加载到网页上，这是我使用的 css。

div.unorderedList { border-style: solid; 填充：10px； }

li.unorderedList { list-style-image: url('..\images\marker.png');}

Answer 1

我建议不要使用 list-style-image 属性。相反，我会使用图像标签。示例：

.list-image {
  list-style: none;
  padding: 0;
}

.list-image li img{
  height: 15px;
  width: auto;
  margin-right: 5px;
}

<ul class="list-image">
  <li><img src="https://cdn.iconscout.com/icon/free/png-256/right-1478289-1251141.png" alt=""> brown </li>
  <li><img src="https://cdn.iconscout.com/icon/free/png-256/right-1478289-1251141.png" alt=""> white </li>
</ul>

而是直接回答你的问题。你没有定位你的列表。 li.unorderedList ul 将是解决方案。

list-style-image: url('imageurl') 不在网页上显示图像

list-style-image: url('imageurl') does not display the image on webpage

html

css

styles

list