段落显示在图像的下方

Question

我必须在一行中显示图像和段落，但段落内容多时，文本显示在我不想要的图像的下方。我必须在一行中显示文本。

我需要这样的输出。

.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

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

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