css для отображения изображения и текста в той же строке

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/