Question

我目前有一个客户形象，我正在使用而不是要点。我已经设置了以下CSS，它工作正常：

ul.benefits {
    list-style-image: url('/images/bullet-point-circle.png');
}

麻烦的是，我使用的图像故意加倍它所需的尺寸，以便它可以是Retina质量...但我似乎无法找到一种方法来指定正在使用的图像的高度作为子弹点......有没有其他方法可以将图像显示为Retina（2x版本缩小到12乘12而不是实际尺寸24 x 24）？

Answer 1

你可以做这样的事情来达到同样的效果：

（删除项目符号并将background设置为li，然后进行一些调整

ul{
    list-style:none;
}

ul li{
 background:url('http://bowlingballexchange.com/applied/misc/facebook24by24.gif') no-repeat left;
    background-size:12px 12px;
}


ul li span{
    margin-left:15px;
}

HTML：

<ul>

<li><span>list 1</span></li>

<li><span>list 2</span></li>

<li><span>list 3</span></li>

<li><span>list 4</span></li>

<ul>

小提琴： http://jsfiddle.net/o17sfjto/

如果您希望这可以使用多行文本...您可以使用不同的解决方法，请参阅此处：

http://jsfiddle.net/SGz75/4/

<ul class="test">
<li><div class="bullet"></div><div class="one">Text Text Text</div></li>
<li><div class="bullet"></div><div class="one">Long Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</div></li>
<li><div class="bullet"></div><div class="one">Text Text Text</div></li>

的CSS：

.test {
list-style: none;
margin: 0;
padding: 0;
}

li > div{
    display:inline-block;
    height:100%;
    //background:red;
    width:5%;
    vertical-align:top;
}

.one{
    width:95%;
}

.bullet{
height:20px;
width:20px;  background:url('http://bowlingballexchange.com/applied/misc/facebook24by24.gif') no-repeat left;
    background-size:12px 12px;
}

用图像制作Retina子弹点

1 个答案: