1

現在、箇条書きの代わりに使用している顧客の画像があります。次のCSSを使用して設定しましたが、正常に動作します。

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

問題は、私が使用している画像が、Retina 品質になるように意図的に必要なサイズの 2 倍になっていることです...しかし、弾丸として使用されている画像の高さを指定する方法を見つけることができないようですポイント...画像をRetinaとして表示する他の方法はありますか（24 x 24の実際のサイズではなく、12 x 12に縮小された2倍バージョン）？

4

1 に答える 1

4

次のようなことを行って、同じ効果を得ることができます。

（箇条書きを削除し、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 に答える