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 {边框样式:实线；填充: 10px；}

li.unorderedList {列表样式图像: 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将是解决方案。