如何让包含SVG的span元素与div元素实现相邻横向排列

你当前没生效的核心原因是第一个test div默认是block块级元素，这类元素天生独占整行，会强制后续元素换行，哪怕你给后面的span设置了inline-block也没用，和SVG元素无关。

可选择以下任意一种方案实现横向并排：

• 给第一个test div也添加display: inline-block属性，同时可以给两个元素都加vertical-align: middle调整垂直对齐，避免出现高低错位的问题。
• 给包裹这个test div和音频图标span的父容器设置display: flex; align-items: center;，flex布局默认横向排列元素，还可以灵活调整两个元素之间的间距，同时不会出现inline-block布局常见的空白节点额外间距问题。
• 如果后续遇到图标和容器对齐偏移的问题，可以单独给SVG元素添加vertical-align: middle修正对齐位置。

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