Question

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

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

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 2

你可以试试这个。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 3

这似乎工作得很好......

我猜你的其他一些CSS正在与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>

CSS列表样式图像未显示

3 个答案: