UL LI 탐색 메뉴 목록 내에서 IMG 사용 ​​

Question

웹 사이트 탐색에 사용되는 메뉴 목록 중 일부는 텍스트와 텍스트 오른쪽에 이미지가 모두 포함 된 메뉴 목록을 갖고 싶습니다.

<ul> 
    <li>Nav item 1</li> 
    <li>Nav item 2 <img src="image.gif" /></li> 
</ul> 

이미지가 포함 된 메뉴 항목을 텍스트 [space] 이미지에 맞게 수평으로 정렬하고 싶습니다.

아무에게도 이것을 달성 할 수있는 CSS를 보여줄 수 있습니까?

Answer 1

ul li img { 
padding-left: 20px; 
} 

Answer 2

이 말은 무엇입니까? http://jsfiddle.net/brandondurham/gvqGk/

HTML

<ul> 
    <li> 
    This is the LI text. <img src="http://dropbox.smallparade.com/bigbubble.png" width="24" height="24"> 
    </li> 
</ul> 

CSS

ul li { 
    font: 14px/24px Helvetica, Arial, sans-serif; 
    white-space: nowrap; 
} 
ul li img { 
    margin-left: 10px; 
    vertical-align: middle; 
} 

나는 이것이 같은 특정 이미지 앵커 수업을에 모든 포장, 네비게이션 그대로 유혹 할 것이다

Answer 3

그 분류 된 앵커의 배경. 이 같은

뭔가 :

<ul> 
    <li><a href="" class="imagedClass">Link 1</a></li> 
    <li><a href="">Link 2</a></li> 
</ul> 


a.imagedClass 
{ 
    display:inline-block; 
    width:200px; 
    background-image:url('/images/image.png'); 
    padding-right:20px;/*width of image*/ 
}