Question

如何在内联块容器中将我的SVG图像放在文本的同一行？

在上面的例子中，我希望我的图片放在我的文本的右边，在同一行，但浏览器自动断行。

.container{
  display: inline-block;
  background:orange;
}

<div class=container>
text<img src="https://res.cloudinary.com/aquis/image/upload/v1521481254/site-2018/megaphone-picto.svg">
</div>

Answer 1

只需指定图像的宽度和/或高度：

＆＃13;

.container{
  display: inline-block;
  background:orange;
}

＆＃13;

<div class=container>
text<img src="https://res.cloudinary.com/aquis/image/upload/v1521481254/site-2018/megaphone-picto.svg" width="20">
</div>

＆＃13;

Answer 2

从display: inline-block课程中移除.container，然后在您的图片上设置inline-block。由于它是svg，因此您还需要为svg提供明确的高度和宽度。

建议将img包装在span标记中，而不是将其设置为img html元素，这会在所有图像上设置相同的小尺寸您网站上的商品。我给了跨度svg-image的类名，但你可以把它命名为其他任何东西。

＆＃13;

.container{
  background:orange;
}

.svg-image {
 display: inline-block; 
 height:20px; 
 width: 20px;
}

＆＃13;

<div class=container>
text<span class="svg-image"><img src="https://res.cloudinary.com/aquis/image/upload/v1521481254/site-2018/megaphone-picto.svg"></span>
</div>

＆＃13;

SVG img在内联块容器

2 个答案: