Html 在同一行中显示文本和图像

css样式有问题。我想在同一行中显示文件和删除图像

第一图像

在这张图片中，图标显示在文档的略上方。如果我包含css代码，它将显示此链接

我想从右边距显示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>';   

---

就我所见，问题来自于CSS应用于标记的事实，标记包含在标记中。无论CSS应用于什么，行为都会发生变化。您应该修改CSS，使其适用于。简单的方法是为这个标签指定一个特定的类。

在第一个屏幕截图中，图像与行高的顶部对齐，因为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 */
}

---

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

try style=float:left；到第一个，样式=浮动：右；第二个标签。