導航鏈接與多個圖像的流體寬度

Question

我試圖創建一個菜單項，並不總是有一個固定的寬度的導航菜單。正因爲如此，我試圖使用一種技術，其中將<a>元素作爲一個背景圖像，然後使用<a>中的<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 
}