带图像的li放在文本上方

Question

文字应该在图片旁边。我只是显示列表点下方的文本显示的问题，而不是紧挨着它。这里有什么问题？我已经看过其他让它完全相同的例子了。但是在示例中它可以正常工作。

＆＃13;

＆＃13;

.icon {
    list-style-type: none;
}
          
.icon li:nth-child(1):before {content: url(icon-1.png)' ';}
.icon li:nth-child(2):before {content: url(icon-2.png)' ';}
.icon li:nth-child(3):before {content: url(icon-3.png)' ';}

＆＃13;

<ul class="icon">
<li>
<h3>Lorem ipsum</h3>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</li>
<li>
<h3>Lorem ipsum</h3>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</li>
<li>
<h3>Lorem ipsum</h3>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用 CSS Flexbox ，并使<h3>包含<span>的所有文字，然后将<li>设为灵活容器。像：

<li>
  <h3>Lorem ipsum<span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</span></h3>
</li>

请看下面的代码段：

.icon {
    list-style-type: none;
}
          
.icon li:nth-child(1):before {content: url('http://placehold.it/50x50')' ';}
.icon li:nth-child(2):before {content: url(http://placehold.it/50x50)' ';}
.icon li:nth-child(3):before {content: url(http://placehold.it/50x50)' ';}

li {
  display: flex;
  align-items: center;
  margin: 10px 0;
}

li:before {
  height: 50px;
}

h3 {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  padding-left: 10px;
}

span {
  display: block;
  font-weight: normal;
  font-size: small;
}

<ul class="icon">
<li>
  <h3>Lorem ipsum<span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</span></h3>
</li>
<li>
  <h3>Lorem ipsum<span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</span></h3>
</li>
<li>
  <h3>Lorem ipsum<span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</span></h3>
</li>
</ul>

希望这有帮助！

Answer 2

此处icon li:nth-child(1):before的行为类似于块级元素，<h3>两者也是块级元素。所以将你的css改为：

.icon li:nth-child(1):before {content: url(icon-1.png)' ';}
.icon li:before { display: inline-block }
h3 {display: inline-block; }

Answer 3

PFB工作片段。我刚添加了一个div标签b / w＆lt; li＆gt;和＆lt; / li＆gt;并为所有＆lt; div＆gt;应用CSS标签是＆lt; li＆gt;的直接子节点。 CSS属性 display：inline-block

.icon {
    list-style-type: none;
}
li>div
{
 display:inline-block;
}
.icon li:nth-child(1):before {content: url(icon-1.png)' ';}
.icon li:nth-child(2):before {content: url(icon-2.png)' ';}
.icon li:nth-child(3):before {content: url(icon-3.png)' ';}

<ul class="icon">
<li>
<div>
<h3>Lorem ipsum</h3>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</div></li>
<li>
<div>
<h3>Lorem ipsum</h3>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</div></li>
<li>
<div>
<h3>Lorem ipsum</h3>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</div></li>
</ul>