html - 在同一行显示文本和图像

Question

我的 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>';   

Answer 1

据我所知，问题在于您的 CSS 适用于 <img>。标记，包含在 <a> 中标签。将 CSS 应用于 <a> 会改变行为.您应该修改您的 CSS，使其适用于 <a><img> .简单的方法是给这个 <a> 一个特定的类标签。