유체 너비에 대한 여러 이미지가 포함 된 탐색 링크

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 
}