流体幅の複数の画像を含むナビゲーションリンク

Question

常に固定幅ではないメニュー項目を持つナビゲーションメニューを作成しようとしています。このため、私は<a>要素を1つの背景画像として、内に<span>という要素を別の背景画像として持つテクニックを使用しようとしています。私はずっと前にこのテクニックを見て、メモリからそれを思い出したことがうまくいかないことを覚えています。ここに私のメニューのマークアップがあります：

<div id="nav"> 
    <ul> 
     <li> 
      <a href="">Home<span></span></a> 
     </li> 
    </ul> 
</div> 

そして、私のCSSここまで：

#nav { 
    height: 35px; 
    width: 942px; 
    background: url('images/nav_bg.png'); 
    border: 1px solid #74818c; 
    border-radius: 3px; 
} 

#nav ul li a { 
    display: inline-block; 
    background: url('images/nav_button_left_idle.png'); 
    line-height: 32px; 

} 

#nav ul li a span { 
    display: inline-block; 
    background: url('images/nav_button_right_idle.png'); 
    line-height: 32px; 
    width: 5px; 
} 

もう少し詳しく説明するために、これは私の<a>タグに使用される背景画像です：

と、<span>要素に使用されているもの：

ありがとうございます、ありがとうございます！

Answer 1

はあなたのスパン」

#nav ul li a { 
    display: inline-block; 
    background: url('images/nav_button_left_idle.png'); 
    line-height: 32px; 
    position:relative; 
} 

#nav ul li a span { 
    display: inline-block; 
    background: url('images/nav_button_right_idle.png'); 
    height: 32px; 
    width: 5px; 
    position:absolute; 
    top: 0; 
    right: 0 
}