スパンタグのテキストを整列する

Question

次と前のボタンがある場所で矢印ナビゲーションを設定しようとしています。 IE 7以降でサポートされる必要があります。

次は、次のテキストの右側に背景イメージを表示します。 前のボタンの前のテキストの左側にテキストを表示します。 これは簡単だと思っていましたが、ちょうど2時間を費やしました。

私が狂ってしまう前に、誰でもこれを助けることができます。

<span class="next"> 
<a href="#">Next Month</a> 
August 
</span> 


<span class="prev"> 
<a href="#">Previous Month</a> 
June 
</span> 

私のCSSでは、これは左ボタン用であり、うまくいきます。

.prev a, .next a { 
    background: url("sprite.png") no-repeat scroll -200px -5px transparent; 
    display: inline-block; 
    height: 25px; 
    text-decoration: none; 
    text-indent: -9999em; 
} 

.prev { 
    float: left; 
} 

.next { 
    float: right; 
} 

.next a { 
    background-position: -200px -18px; 
} 

Answer 1

@chapsterj;最初にspanはinline要素ですので、自分のCSSにdisplay:blockと定義してください。 2番目には必要ありませんtext-indent & 3番目に余分なスパンタグなしでそれを行うことができます。

a.prev, a.next{ 
    background: url("sprite.png") no-repeat scroll -200px -5px transparent; 
    display:block; 
    height: 25px; 
    text-decoration: none; 
} 

.prev { 
    float: left; 
    padding-right:40px; 
} 

.next{ 
    background-position: -200px -18px; 
    float: right; 
    padding-left:40px; 
}