如何让inline-block容器内的SVG图片与文本同行显示？

嘿，看你遇到了inline-block容器里文本和图片自动换行的问题，我给你几个实用的解决方案，都是前端开发里常用的靠谱思路：

首选方案：用Flexbox轻松实现 #

现在Flexbox是布局的首选，代码简洁还不容易出问题，完美适配你的需求：

.container {
  display: flex;
  align-items: center; /* 让文本和图片垂直居中，视觉上更舒服 */
  justify-content: space-between; /* 文本靠左、图片靠右，中间自动留白 */
  background: orange;
  /* 可以加个最小宽度，防止内容太窄时被挤换行 */
  min-width: 200px;
}

对应的HTML：

<div class="container">
  你的文本内容
  <img src="https://res.cloudinary.com/aquis/image/upload/v1521481254/site-2018/megaphone-picto.svg" alt="喇叭图标">
</div>

这个方法不用操心元素宽度，Flex会自动帮你把两者排在一行，图片稳稳靠右侧。

传统浮动方案（兼容旧浏览器） #

如果需要兼容一些老版本浏览器，浮动布局也是个靠谱选择，不过要注意清除浮动的影响：

.container {
  overflow: hidden; /* 清除内部浮动带来的布局混乱 */
  background: orange;
  min-width: 200px;
}
.container img {
  float: right; /* 让图片靠右浮动 */
  margin-left: 8px; /* 给图片和文本加个间距，避免挤在一起 */
}

HTML要注意把图片放在文本前面，这样文本才会自然绕开浮动的图片：

<div class="container">
  <img src="https://res.cloudinary.com/aquis/image/upload/v1521481254/site-2018/megaphone-picto.svg" alt="喇叭图标">
  你的文本内容
</div>

为啥你原来的inline-block会换行？ #

你原来的代码用了inline-block，大概率踩了这两个坑：

1. inline-block元素之间默认有空白间距（因为HTML里的换行或空格），导致文本+图片的总宽度超过容器，触发换行；
2. 如果容器本身宽度不够，也会强制换行。

要是你就想用inline-block，可以试试这俩小技巧：

• 把容器内的元素写在同一行，去掉空格：

<div class="container">你的文本内容<img src="https://res.cloudinary.com/aquis/image/upload/v1521481254/site-2018/megaphone-picto.svg" alt=""></div>

• 或者给容器设font-size: 0消除空白，再给文本单独恢复字体大小：

.container {
  display: inline-block;
  background: orange;
  font-size: 0; /* 干掉inline-block元素间的空白 */
}
.container span {
  font-size: 16px; /* 把文本字体大小加回来 */
  display: inline-block;
}
.container img {
  display: inline-block;
  margin-left: 8px;
}

HTML改成：

<div class="container">
  <span>你的文本内容</span>
  <img src="https://res.cloudinary.com/aquis/image/upload/v1521481254/site-2018/megaphone-picto.svg" alt="喇叭图标">
</div>

总的来说，还是首推Flexbox方案，代码少、逻辑清晰，后期维护也方便～

内容的提问来源于stack exchange，提问作者Fabien