どのようにして、幅を設定せずにテキストを字下げすることなく、ボタンにスプライトを付けることができますか？

Question

これはある種のインラインブロックマジックで行うことができると思いますか？多分？

idk ..ですが、基本的にテキストとスプライトはインラインである必要があります。

は今、そうではありません：http://jsfiddle.net/DerNalia/qvZkK/2/

HTML：

<a href="" class="action_button" rel="facebox" style=""> 
    <span class="button_sprite_x"></span> 
    Delete 
</a> 

Answer 1

あなたのレイアウトは、あなたがそれをフロートすることができますか？

.action_button span.button_sprite_x, 
.action_button span.button_sprite_plus, 
.action_button span.button_sprite_duplicate, 
.action_button span.button_sprite_star{ 
    width: 20px; 
    height: 20px; 
    display: block; 
    float: left; /* Added float */ 
} 

http://jsfiddle.net/qvZkK/3/

UPDATE：

ああ、しかし、あなたはおそらく、スプライトがa要素の背景の範囲内になりたいです。 display: inline-blockとfloat: leftの組み合わせがそうです。

.action_button { 
    display: inline-block; /* Add display: inline-block to .action_button */ 
} 

.action_button span.button_sprite_x, 
.action_button span.button_sprite_plus, 
.action_button span.button_sprite_duplicate, 
.action_button span.button_sprite_star{ 
    display: inline-block; /* And add display: inline-block here, also */ 
    float: left; /* Added float */ 
} 

http://jsfiddle.net/qvZkK/4/

Answer 2

は、スパン内のテキストを置く：左

からhttp://jsfiddle.net/qvZkK/7/

• フロートをaタグテキストに内部<span>
<span> DELETE </span>すなわち削除を置きます幅から .button_sprite_xクラスと背景画像が無リピートに設定されていますが、そこからOK自分でスタイルをどのように把握することができますよう

が見えることを確認し、それをpadding-left: 25px

を与えます。 PS - 見やすくするためにリンクに余白を追加しましたが、削除したいと思うかもしれません。