Question

我想在同一行显示文字和图片，但图片显示在文字的上方。Demo

 html img.del {
   display: inline-block;
   float: right;
   cursor: pointer;
   margin-right: 74%
 }
 .astext {
   text-align: left;
   margin-left: 10%;
 }

 <h4><span><a class="astext" href="'.$next.'" title="'.$next.'" target="_blank" download><p style="margin-left:1cm;">'.$next1.'</a></span>
       <img src="image/delete1.png" class="del" alt="delete" style="width:10px;height:10px" title="Remove" onclick="myFunction('.$fet['f_id'].');"></h4>

Answer 1

首先，您的代码中有一些开放标记：

第二：我更新你的小提琴正常工作：

 img.del {
    display: inline-block;
    cursor: pointer;
    margin-right: 74%;
    position: relative;
    }
.astext {
    display: inline-block;
    text-align: left;
    margin-left: 10%;
}

这是应该如何显示的？

float: right和display: inline-block不能一起使用，因为它们排序相同的东西。请参阅此参考：http://www.ternstyle.us/blog/float-vs-inline-block

这是你的小提琴： http://jsfiddle.net/1z9b9m9p/4/

用于在同一行显示图像和文本的CSS

1 个答案: