정렬되지 않은 이미지 목록에 텍스트 줄을 배열하는 방법

Question

나는 각 항목이 이미지이고 텍스트가 뒤에 오는 항목의 정렬되지 않은 목록이 있습니다. 텍스트를 정확히 정렬하고 싶지만, 아이콘의 크기가 약간 다르므로 각 텍스트가 정렬되지 않습니다. 예제는 아래의 JSFiddle을 참조하십시오. Option의 "O"가 RSS 피드의 "R"보다 왼쪽에 있음을 볼 수 있습니다.

가장 쉬운 방법은 무엇입니까? 이미지를 변경하지 않고이를 수행 할 수있는 방법이 있습니까?

<ul class="dropdown-menu"> 
    <li><a id="login" style="cursor:pointer;"><img src="http://www.w3schools.com/images/up.gif" /> Login</a></li> 
    <li><a id="upload" style="cursor:pointer;"><img src="http://static.bbci.co.uk/id/0.23.4/img/bbcid_orb_signin_dark.png" /> Upload a file</a></li> 
    <li><a id="option 3" style="cursor:pointer;"><img src="http://res2.windows.microsoft.com/resbox/en/windows%207/main/4f6cbd09-148c-4dd8-b1f2-48f232a2fd33_818.jpg"/>Option 3</a></li> 
    <li><a id="rss" id="rss" ><img src="http://www.w3schools.com/images/up.gif" /> RSS Feed</a></li> 
    <li><a id="about" style="cursor:pointer;"><img src="https://www.google.com/images/icons/product/googlemail-16.png" /> About</a></li> 
</ul> 

여기 JSFiddle 있습니다 :

이

내 HTML입니다

http://jsfiddle.net/9f1gxLv6/

감사합니다,

필

Answer 1

당신이 공간을 찾고 있다면 아이콘과 텍스트를 수평으로 균등하게 이 마크 업에

#login { 
 
    background-image: url('http://www.w3schools.com/images/up.gif'); 
 
} 
 
#upload { 
 
    background-image: url('http://static.bbci.co.uk/id/0.23.4/img/bbcid_orb_signin_dark.png'); 
 
} 
 
#option_3 { 
 
    background-image: url('http://res2.windows.microsoft.com/resbox/en/windows%207/main/4f6cbd09-148c-4dd8-b1f2-48f232a2fd33_818.jpg'); 
 
} 
 
#rss { 
 
    background-image: url('http://www.w3schools.com/images/up.gif'); 
 
} 
 
#about { 
 
    background-image: url('https://www.google.com/images/icons/product/googlemail-16.png'); 
 
} 
 
a { 
 
    display:inline-block; 
 
    padding: 2px 0 2px 30px; 
 
    background-repeat:no-repeat; 
 
    background-position: left center; 
 
}

<ul class="dropdown-menu"> 
 
    <li><a id="login" style="cursor:pointer;">Login</a> 
 

 
    </li> 
 
    <li><a id="upload" style="cursor:pointer;">Upload a file</a> 
 

 
    </li> 
 
    <li><a id="option_3" style="cursor:pointer;">Option 3</a> 
 

 
    </li> 
 
    <li><a id="rss" id="rss">RSS Feed</a> 
 

 
    </li> 
 
    <li><a id="about" style="cursor:pointer;">About</a> 
 

 
    </li> 
 
</ul>