对准图像列表项

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;}。垂直对齐适用于这类问题。