段落顯示在圖像的下方

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>