css - cssは画像を表示しない 評価システム用のcssスプライトがいくつかあります：http：//i.imgur.com/qeb2b.png 親指をロードするとき

Question

評価システム用のcssスプライトがいくつかあります：http：//i.imgur.com/qeb2b.png

親指をロードするとき

 .thumb-down {
    background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -13px;
    width: 15px;
    height: 16px;
 }

 .thumb-up {
    background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -33px;
    width: 15px;
    height: 16px;
 }

親指を表示させる唯一の方法は、これを行う場合です。

Was this review helpful? <a href="#" class="thumb-up rating">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a> | <a href="#" class="thumb-down rating">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>

すべてを削除すると 、親指が消えます。1つだけ残す と、スプライトの部分的なビューが表示されます。

スプライトを必要とせずに表示するにはどうすればよいですか ?

Answer 1

を使用してfloat:left：

 .thumb-down {
    background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -13px;
    width: 15px;
    height: 16px;
    float: left;  /* OR float:right, depending on what you need */
 }

 .thumb-up {
    background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -33px;
    width: 15px;
    height: 16px;
    float: left;
 }

Answer 2

リンクはインライン要素であるため、幅と高さを指定することはできません。サイズはコンテンツからのみ取得されるため、スペースによってサイズが決まります。

リンクをインラインブロック要素にするのが最善の方法だと思います。そうすれば、それらは特定の幅と高さを持つことができるようにブロック要素ですが、マークアップを変更する必要がないように、テキストフローのインライン要素のままです。

 .thumb-down {
    background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -13px;
    display: inline-block;
    width: 15px;
    height: 16px;
 }

 .thumb-up {
    background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -33px;
    display: inline-block;
    width: 15px;
    height: 16px;
 }

Answer 3

画像は背景です。ただし、背景を表示するには、要素にある程度の高さと幅が必要です。あなたの場合、空のタグには高さと幅がありません。あなたはそれをdisplay：blockにする必要があります

Answer 4

display: inline-block;両方のCSSクラスで使用するだけです。