本文介绍使用 CSS Flexbox 实现单选按钮（radio）标签文本的悬挂缩进，确保换行时第二行及后续行与第一行首字母对齐，避免传统 text-indent + padding 方案失效的问题。
本文介绍使用 css flexbox 实现单选按钮（radio）标签文本的悬挂缩进，确保换行时第二行及后续行与第一行首字母对齐，避免传统 `text-indent` + `padding` 方案失效的问题。
在表单设计中，当单选按钮的标签文本较长需自动换行时，若未正确设置排版，常出现如下不美观效果：
○ Location 1 ○ Location xxx xxx xxx xxx xxx
第二行文本顶格显示，破坏视觉一致性。理想效果应为悬挂缩进（hanging indent），即：
○ Location 1 ○ Location xxx xxx xxx xxx xxx
但直接对 应用 text-indent: -X; padding-left: X 通常无效——因为 text-indent 仅作用于块级元素的第一行，而 默认为内联元素；即使设为 display: inline-block，其行为也受父容器流式布局限制，难以精准控制缩进基准。
✅ 推荐方案：Flexbox 布局 + 语义化结构
核心思路是将
label {
display: flex;
align-items: center; /* 垂直居中对齐 */
margin-bottom: 1em;
line-height: 1.5;
}
.custom-radio {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 0.8em;
height: 0.8em;
border-radius: 50%;
border: 1px solid #FFA500;
flex: 0 0 0.8em; /* 不增长、不收缩、基础宽度 0.8em */
margin-right: 0.4em; /* 与文本保持间距 */
}
.indented {
margin-left: 0.2em; /* 关键：在文本前留出缩进空间，模拟悬挂效果 */
}
HTML 结构应语义清晰、无冗余空格或
：
<div class="sideBar">
<label>
<input type="radio" class="custom-radio" name="locations" value="1"><span class="indented">Location 1</span>
</label>
<label>
<input type="radio" class="custom-radio" name="locations" value="2"><span class="indented">Location xxx xxx xxx</span>
</label>
</div>
? 关键要点说明：
- ✅ 移除
和 ：它们破坏语义与响应式控制，改用 margin-bottom（label）和 margin-right（radio）实现间距； - ✅ flex: 0 0 0.8em 确保单选按钮尺寸稳定，不随容器缩放变形；
- ✅ margin-left: 0.2em 作用于 ，使文本整体右移，配合左侧固定宽度的 radio 按钮，形成视觉上“第二行缩进”的错觉——这正是悬挂缩进的实用实现；
- ✅ 若需更精确控制（如多行文本首行对齐），可进一步为 .indented 添加 display: inline-block 和 vertical-align: top，但本例中默认 inline 已足够稳健。
? 延伸提示：
- 避免使用 vw 单位做缩进（如原代码中的 0.8vw），易导致小屏下缩进过小或过大；推荐使用 em 或 rem，与字体大小联动；
- 如需支持旧版浏览器（IE11），可回退至 display: table-cell 方案，但 Flexbox 在现代框架（如 Svelte、React）中兼容性极佳，无需妥协。
通过此方法，你不仅能优雅解决悬挂缩进问题，还能提升代码可维护性与无障碍访问支持（
