段落显示在图像下方

Question

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

我需要这样的输出。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试保证金 - 保留负数并向右添加一些正数，它将安排它。

 <input type="hidden" name="candidate_id" value="<?php echo $getCandidate['candidate_id']; ?>">

          <input type="hidden" name="user_id" value="<?php echo $getCandidate['user_id']; ?>">

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

Answer 2

你很亲密。缺少的拼图是一个负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 3

您可以使用list-style-image的{​​{1}}。虽然您仍会看到黑色子弹，但请尝试使用小图像，如图标，然后更改网址

ul

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