如何实现标签文本换行时单选按钮保持固定对齐不偏移

错位原因 #

原有代码的两个设置导致了文本换行时按钮错位：

• .label-container设置了align-items: center，单选按钮会始终跟随右侧文本块的总高度做居中对齐，文本换行后总高度增加，按钮自然向下偏移
• 单选按钮写死了position: relative; top: -8px的偏移值，这个偏移是基于短文本时的居中位置计算的，文本高度变化后偏移基准改变，位置就会失准

修复代码 #

只需要调整CSS即可，HTML结构无需改动：

.label-container {
  display: inline-flex;
  /* 改为顶部对齐，让单选按钮以容器顶部为定位基准，不受文本高度变化影响 */
  align-items: flex-start;
}

.label-wrapper {
  width: 200px;
}

input {
  margin: 0;
  /* 移除原有相对定位和top偏移，通过顶部外边距微调位置，对齐第一行前缀文本 */
  margin-top: 2px;
}

.label-text {
  box-sizing: border-box;
  /* 调整行高适配多行文本，避免文字拥挤 */
  line-height: 1.4;
}

.prefix {
  font-weight: bold;
  font-size: 14px;
}

.text-spacing {
  padding-inline-start: 8px;
  padding-inline-end: 4px;
}

对应的HTML保持原有写法即可：

<div class='label-wrapper'>
  <label class="label-container">
    <input type="radio" />
    <div>
      <div class="label-text text-spacing prefix">Prefix Text</div>
      <div class="label-text text-spacing">This is label. This is label. This is label. This is label.</div>
    </div>
  </label>
</div>

实现效果 #

修改后单选按钮位置完全固定，无论标签文本是否换行、行数多少，都会始终和前缀文本保持对齐，不会出现位移。同时调整后的行高让长文本展示更易读。

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