CSS 列表样式图像未显示

Question

我正在尝试获取箭头作为列表样式图像。谷歌搜索和 SO 我发现了一些可能出错的地方（显示：列表项，溢出，使用背景图片，但没有帮助。路径是正确的。

ul#contactlist {list-style-image:url('images/images/arrow.png'); list-style-type: square; padding: 15px;}
    ul#contactlist li{display: list-item; padding: 10px; overflow: visible; width:100px; margin: 1px;

我也试过了

ul#contactlist li{background-image:url('images/images/arrow.png'); background-repeat:no-repeat; background-position:0px 0px;

和

ul#contactlist li{background: url('images/images/arrow.png') left center no-repeat; list-style-position: inside; vertical-align: middle;}

奇怪的是 list-style-type: square; 也没有显示，但是当我把 display: list-item; 放在 ul#contactlist 上时，有 1 个方块。

list-style-position: inside; 还是在外面，没有帮助

这是HTML。

<ul id="contactlist">
    <li>lorem</li>
    <li>ipsum</li>
    <li>dolor</li>
    <li>sit amet</li>
</ul>

Answer 1

这似乎工作得很好...

我猜你的 CSS 的一些其他部分与 list-style-image 相矛盾/覆盖了 list-style-image，或者你的图片路径不正确。

#contactlist {
    list-style-image: url("http://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Sideways_Arrow_Icon.png/50px-Sideways_Arrow_Icon.png");
}

<ul id="contactlist">
    <li>lorem</li>
    <li>ipsum</li>
    <li>dolor</li>
    <li>sit amet</li>
</ul>

Answer 2

尝试以下 CSS

ul#contactlist {
    padding: 0;
    margin: 0;
}
ul#contactlist li{
    background:url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-forward-16.png') 2px 4px no-repeat; 
    display: list-item;
    padding: 3px 3px 3px 20px;
    list-style: none;
}

JSFIDDLE DEMO

Answer 3

你可以试试这个。

ul {
  list-style: none;
}
ul li {
  position: relative;
}
ul li:before {
  content: ">"; /* remove this is you want to use the image! */
  position: absolute;
  width: 30px;
  height: 30px;
  left: -30px;
  background: url("images/images/arrow.png") no-repeat 50% 50% / contain;
}

<ul>
  <li>LIST ITEM</li>
  <li>LIST ITEM</li>
  <li>LIST ITEM</li>
  <li>LIST ITEM</li>
</ul

CSS 列表样式图像未显示

CSS list-style-image not showing

html

css

image

list