在同一行显示文本和图像

Question

我遇到了css样式的问题。我想在同一行显示文件并删除图片。

第1张图片

在此图像中，图标显示在文档上方。如果我包含css代码，则会显示链接。

我想从margin-right显示20％的图像。对于测试，我改为66％。

在第二个imgae中是不使用css风格的屏幕截图。 我附上了我的CSS和HTML代码

css code:
img {
  display: inline-block;
  float: right;
  margin-right:66%;   //realy I want  margin-right:20%;
  }

html in php
 echo '<div style="text-align:left;">';
            while($fet=mysql_fetch_assoc($filesql1))
            {

              $file=$fet['file_name'];
               $ef=$fet['cf_id'];
              $next1 = basename($file);
              echo "<h3><a  class=doc href='".$file."' title='".$file."' download><p style='margin-left:1cm;'>".$next1."</a>";
               echo '<a href=#><img src="image/delete1.png"  width="10" height="10" title="Remove" onclick="myFunction('.$fet['cf_id'].');"></a></span>';
            }   
         echo '</div>';   

Answer 1

据我所知，问题来自于您的CSS适用于<img>标记，该标记包含在<a>标记中。无论CSS应用于<a>，行为都会发生变化。您应该修改CSS以使其适用于<a><img>。简单的方法是为此<a>标记提供特定的类。

Answer 2

在你的第一个截图中，图像与行高的顶部对齐（因为css使其成为浮点数），在第二个屏幕截图中，它通过浏览器默认对齐到行高的中心 - 这个在您的情况下接近基线但不完全在线上。 要处理你的css代码：

img {
display: inline-block;
float: right;
margin-right:20%;
position: relative;
top: 4px; /* maybe 3px or 5px or even 6px will look better; try it out */
}

这会使您的图像在大多数浏览器中都显示在线上，但您必须允许其他人在线上方或下方显示图像。这是将图像与文本对齐的已知问题，因为并非所有浏览器都在同一位置呈现文本的基线。