如何让<p>标签文本与<svg>标签在同一行显示（Svelte环境）

核心问题分析 #

<p>标签默认是块级元素，会独占整行空间，这是导致它和<svg>无法在同一行显示的根本原因。以下是几种直接有效的修正方案：

方案1：修改<p>的显示模式并调整垂直对齐 #

通过CSS将<p>改为行内块元素，同时消除默认边距并设置垂直居中，确保和<svg>对齐：

<style>
  .inline-text {
    display: inline-block;
    margin: 0; /* 移除<p>默认的上下外边距 */
    vertical-align: middle; /* 与svg垂直居中对齐 */
  }
</style>

<p class="inline-text">需要对齐的文本</p>
<svg width="24" height="24" viewBox="0 0 24 24">
  <!-- 你的svg内容 -->
  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/>
</svg>

方案2：使用Flex容器包裹（推荐，对齐更灵活） #

用<div>作为Flex容器，通过align-items控制垂直对齐，还能方便设置元素间距：

<style>
  .align-container {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    gap: 8px; /* 文本与svg之间的间距，可按需调整 */
  }
</style>

<div class="align-container">
  <p>需要对齐的文本</p>
  <svg width="24" height="24" viewBox="0 0 24 24">
    <!-- 你的svg内容 -->
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/>
  </svg>
</div>

方案3：替换<p>为<span>（适合无语义需求的场景） #

如果不需要<p>的块级语义，直接用行内元素<span>替代，无需额外CSS：

<span>需要对齐的文本</span>
<svg width="24" height="24" viewBox="0 0 24 24">
  <!-- 你的svg内容 -->
  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/>
</svg>

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