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

在listitem中将图像与锚点对齐

2 个答案: