1

我目前使用的是客户图像，而不是要点。我使用以下 CSS 进行了设置，并且工作正常：

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

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

4

1 回答 1

4

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

（删除项目符号并将 a 设置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;
}
于 2014-08-13T19:04:46.810 回答