如何在标签旁添加图标且保留原有界面布局（HTML/CSS）

我想在界面的标签旁添加图标，当前界面布局正常，但在标签右侧添加图标后，布局发生了错乱。请问有没有办法在添加图标的同时保留原有界面布局？

以下是我的代码：

<tr>
     <td className="name">Critère d'agrégation</td>
        <td className="value column-2">
             {aggregationDomain.map(codedValue => 
                <div className='blockTooltip'>
                    <label className = {!config?.aggregationEnabled.includes(codedValue.code) ? 'text-gray' : ''}>
                      <input type="radio" name="AggregationSelection" value={codedValue.code} checked={props.reportConfig.aggregation === codedValue.code} onChange={updateAggregation} disabled={!config?.aggregationEnabled.includes(codedValue.code)} />
                      {codedValue.name}
                     </label>
                     <div className='svgTooltip'>
                          <svg className='svgTooltipIcon' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width='13' height='13'><path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM216 336h24V272H216 192V224h24 48 24v24 88h8 24v48H296 216 192V336h24zm72-144H224V128h64v64z"/></svg>
                      </div> 
                 </div> 
              )}
       </td>
</tr>

布局错乱的核心原因是图标被放在了label标签外部，且.blockTooltip默认是块级布局，导致图标与标签分行显示。可以通过两种方式修复：

方法一：将图标嵌入label内部 #

把svgTooltip容器移到label标签内，让图标和标签文字处于同一行，完全保留原有布局：

<tr>
     <td className="name">Critère d'agrégation</td>
        <td className="value column-2">
             {aggregationDomain.map(codedValue => 
                <div className='blockTooltip'>
                    <label className = {!config?.aggregationEnabled.includes(codedValue.code) ? 'text-gray' : ''}>
                      <input type="radio" name="AggregationSelection" value={codedValue.code} checked={props.reportConfig.aggregation === codedValue.code} onChange={updateAggregation} disabled={!config?.aggregationEnabled.includes(codedValue.code)} />
                      {codedValue.name}
                      {/* 图标移至label内部 */}
                      <div className='svgTooltip'>
                          <svg className='svgTooltipIcon' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width='13' height='13'><path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM216 336h24V272H216 192V224h24 48 24v24 88h8 24v48H296 216 192V336h24zm72-144H224V128h64v64z"/></svg>
                      </div>
                     </label>
                 </div> 
              )}
       </td>
</tr>

方法二：用CSS强制行内布局 #

如果不想调整HTML结构，给.blockTooltip添加CSS样式，强制标签与图标在同一行：

.blockTooltip {
  display: inline-flex;
  align-items: center; /* 垂直居中对齐图标与文字 */
  gap: 4px; /* 可选：调整图标与文字的间距 */
}

.blockTooltip label {
  display: inline-flex;
  align-items: center;
}

两种方法都能保证添加图标后原有布局不变，推荐第一种，因为语义更合理（图标属于标签的一部分）。

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