Absatz wird unten von Bild angezeigt

Question

Ich muss Bild und Absatz in einer Zeile anzeigen, aber wenn Absatz Inhalt ist mehr, dann Text unten angezeigt werden von Bild, das ich nicht will. Ich muss Text in einer Zeile anzeigen.

Ich brauche Ausgabe wie folgt.

.test1{ 
 
    padding: 0 30px; 
 
} 
 
.test1 p img{ 
 
    width: 20px; 
 
}

<div class="test1"> 
 
    <p><img src="http://cloudhostingasp.net/wp-content/uploads/2017/02/GlobeSoft-Check-Icon.png"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.</span></p> 
 
    <p><img src="http://cloudhostingasp.net/wp-content/uploads/2017/02/GlobeSoft-Check-Icon.png">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.</p> 
 
</div>

Answer 1

Sie sind in der Nähe. Das fehlende Puzzlestück ist ein negativer text-indent und ein wenig Spielraum für das Bild zu atmen:

.test1{ 
 
    padding: 0 0 0 30px; 
 
    text-indent: -30px; 
 
} 
 
.test1 p img{ 
 
    width: 20px; 
 
    margin-right: 10px; 
 
}

<div class="test1"> 
 
    <p><img src="http://cloudhostingasp.net/wp-content/uploads/2017/02/GlobeSoft-Check-Icon.png"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.</span></p> 
 
    <p><img src="http://cloudhostingasp.net/wp-content/uploads/2017/02/GlobeSoft-Check-Icon.png">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.</p> 
 
</div>

Answer 2

Versuchen Sie, margin-left negativen Betrag und fügen Sie einige positive es nach rechts ordnen .

\t .test1{ 
 
padding: 0 30px; 
 
\t } 
 
.test1 p img{ 
 
\t width: 20px; 
 
    position: relative; 
 
    margin-left: -25px; 
 
    margin-right: 10px; 
 
    vertical-align: middle; 
 
     
 
}

<div class="test1"> 
 
\t \t <p><img src="http://cloudhostingasp.net/wp-content/uploads/2017/02/GlobeSoft-Check-Icon.png"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.</span></p> 
 
\t \t <p><img src="http://cloudhostingasp.net/wp-content/uploads/2017/02/GlobeSoft-Check-Icon.png">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.</p> 
 
\t </div>

Answer 3

Sie konnten die list-style-image von ul verwenden. Obwohl Sie noch eine schwarze Kugel sehen, versuchen Sie ein kleines Bild mit, wie ein Symbol, dann die URL

ul { 
 
    list-style-image: url('someSmallImg.png'); 
 
}

<div> 
 
    <ul> 
 
    <li>asdasd</li> 
 
    <li>dhgfhgfh</li> 
 
    </ul> 
 
</div>