内联块容器中同一行文本上的 SVG img答案

【问题标题】：SVG img on the same line of text in inline-block container内联块容器中同一行文本上的 SVG img
【发布时间】：2018-03-20 03:57:37
【问题描述】：

如何将我的 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>

【问题讨论】：

标签： html css svg

【解决方案1】：

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

.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" width="20">
</div>

【讨论】：

我不想设置静态高度或宽度，因为它是可管理的内容。还有其他解决方案吗？
@Fabien 它是一个外部 SVG --> 这意味着它是可扩展的 --> 这意味着如果您不定义任何宽度/高度，浏览器将为您完成。它不像一个你可以在没有任何宽度/高度的情况下使用它的图像，因为它具有内部宽度/高度......这里是关于 SVG

【解决方案2】：

从您的 .container 类中删除 display: inline-block 并在您的图像上设置 inline-block。由于它是svg，因此您还需要为svg 提供明确的高度和宽度。

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

.container{
  background:orange;
}

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

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

【讨论】：

为什么是跨度？图
我不想设置静态高度或宽度，因为它是可管理的内容。还有其他解决方案吗？