如何让HTML中标题与SVG图标显示在同一行？

问题根源在于 <h1> 是块级元素，默认会占据整行宽度，导致后续的SVG被挤到下一行。以下是几种可行的解决方案：

方案1：将SVG嵌入h1标签内部 #

直接把SVG放到<h1>标签里，两者属于同一容器，自然会显示在同一行：

<h1>hello<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right-circle" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/></svg></h1>

方案2：修改h1的CSS显示属性 #

通过CSS将<h1>改为inline-block（或inline），使其不再独占整行，同时添加垂直对齐保证显示美观：

<style>
  h1 {
    display: inline-block;
    vertical-align: middle; /* 让文字和SVG垂直居中对齐 */
    margin: 0; /* 可选：清除h1默认的上下外边距，避免间距问题 */
  }
</style>
<h1>hello</h1><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right-circle" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/></svg>

方案3：用Flex容器包裹元素 #

通过Flex布局实现同行排列，同时轻松控制垂直对齐：

<style>
  .title-wrapper {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    gap: 4px; /* 可选：添加文字和SVG之间的间距 */
  }
</style>
<div class="title-wrapper">
  <h1>hello</h1>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right-circle" viewBox="0 0 16 16">
    <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/>
  </svg>
</div>

为什么nobr标签无效？ #

nobr仅能阻止文本内容内部的自动换行，但无法改变块级元素（如<h1>）独占整行的默认布局特性，因此解决不了这个问题。

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