對準圖像列表項

Question

我創建的鏈接列表，這樣

<ul style="font-size: 10px; cursor: pointer; display: block;" class="links"> 
    <li> 
     <img src="http://www.google.com/s2/favicons?domain=api.jquery.com" 
     style="display:inline-block;"> 
     <a href="" style="color: blue; cursor: pointer; background: 
     white;">.append() | jQuery API Documentation</a> 
    </li> 
    <li> 
     <img src="http://www.google.com/s2/favicons? 
     domain=www.startutorial.com" style="display:inline-block;"> 
     <a href="" style="color: blue; cursor: pointer; background: 
     white;">DropzoneJs + PHP: How to build a file upload form </a> 
    </li> 
</ul> 

的問題是a與img的底部對齊。我希望它與頂端一致。我嘗試了float，但是這會混亂整個佈局，然後將不得不應用.clearfix黑客看起來不太好。還有其他解決方案嗎？

Answer 1

嘗試vertical-align:top

a{ 
 
    vertical-align:top 
 
    }

<ul style="font-size: 10px; cursor: pointer; display: block;" class="links"> 
 
    <li> 
 
     <img src="http://www.google.com/s2/favicons?domain=api.jquery.com" 
 
     style="display:inline-block;"> 
 
     <a href="" style="color: blue; cursor: pointer; background: 
 
     white;">.append() | jQuery API Documentation</a> 
 
    </li> 
 
    <li> 
 
     <img src="http://www.google.com/s2/favicons? 
 
     domain=www.startutorial.com" style="display:inline-block;"> 
 
     <a href="" style="color: blue; cursor: pointer; background: 
 
     white;">DropzoneJs + PHP: How to build a file upload form </a> 
 
    </li> 
 
</ul>

Answer 2

我用a {vertical-align: top;}。垂直對齊適用於這類問題。