段落が画像の下に表示されています

Question

画像と段落を1行に表示する必要がありますが、段落の内容が多い場合は、望ましくない画像の下にテキストが表示されます。私は1行にテキストを表示する必要があります。

このような出力が必要です。

.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

あなたは近いです。不足しているパズルのピースはtext-indent負と呼吸する画像のマージンのビットです：

.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

マージン左ネガティブ量に試してみて、それはそれを手配します右にいくつかの肯定を追加します。

\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

あなたはulのlist-style-imageを使用することができます。それでもアイコンのように、小さな画像を使用してみてください、黒い弾丸が表示されますが、その後、URLにMr.Boldwwynを返信するための

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

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