在同一行中顯示文本和圖像

Question

我的CSS樣式有問題。我想在同一行中顯示文件並刪除圖像。

第一張圖片

在此圖像圖標中，略高於doc.If我包括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>標記提供特定的類。

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 */
}

這將使您的圖像在大多數瀏覽器中顯示在行上，但是您將不得不允許其他人在行上方或行下方顯示圖像。 這是將圖像與文本對齊的一個已知問題，因為並非所有瀏覽器都在同一位置呈現文本的基線。