本文介绍使用 css flexbox 实现 radio 按钮后跟随文本的悬挂缩进（hanging indent），确保换行时第二行与第一行文字左对齐，而非与复选框对齐，提升长文本选项的可读性与专业排版效果。
本文介绍使用 css flexbox 实现 radio 按钮后跟随文本的悬挂缩进（hanging indent），确保换行时第二行与第一行文字左对齐，而非与复选框对齐，提升长文本选项的可读性与专业排版效果。
在表单设计中，当单选按钮（<input type="radio">）后接较长的标签文本时，若文本自动换行，常见问题为：第二行文本顶格显示，导致视觉上与前一行不对齐，破坏阅读节奏。例如：
○ Location 1 ○ Location xxx xxx xxx xxx xxx ← 这里缩进异常，应与“Location”起始位置对齐
传统尝试如 text-indent + padding-left 对内联元素（如 <span>）无效，因其不适用于非块级或未设置宽度的上下文；而滥用 和 <br> 则违背语义化 HTML 原则，且难以响应式控制。
✅ 推荐方案：Flexbox 布局 + 精确尺寸控制
核心思路是将 <label> 设为 display: flex 容器，让复选框（input）固定宽度、不伸缩，文本 <span> 占据剩余空间，并通过 margin-left 在文本前预留“缩进空隙”，从而天然实现悬挂效果——即首行缩进由复选框占据空间决定，后续换行则自动继承该左侧边界。
以下是完整、可直接复用的 CSS 与 HTML 结构：
.sideBar {
width: 100px;
padding: 10px;
font-size: 1em;
font-weight: 100;
}
label {
display: flex;
line-height: 1.5;
margin-bottom: 1em; /* 替代 <br>，语义清晰、易调节 */
align-items: center; /* 垂直居中对齐，提升视觉一致性 */
}
.indented {
margin-left: 0.2em; /* 关键：在文本前留出间隙，形成“悬挂”视觉基准 */
flex: 1; /* 占满剩余空间，确保文本充分换行 */
}
.custom-radio {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 0.8em;
height: 0.8em;
max-height: 0.8em;
border-radius: 50%;
border: 1px solid #FFA500;
flex: 0 0 0.8em; /* 关键：禁止缩放，固定宽度，为悬挂缩进提供稳定锚点 */
margin-right: 0.4em; /* 可选：增强复选框与文本间距，提升可读性 */
}
.custom-radio:checked {
background-color: #FFA500;
border-color: #FFA500;
}对应 HTML（已移除冗余 与 <br>）：
<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>? 关键要点说明：
- ✅ flex: 0 0 0.8em 是实现悬挂缩进的基石：它锁定复选框尺寸，使所有 <label> 的文本起始位置严格对齐；
- ✅ margin-left: 0.2em 不是“缩进文本”，而是为文本预留视觉偏移，配合固定宽度复选框，自然形成悬挂效果；
- ✅ 移除 <br> 改用 margin-bottom，符合 CSS 控制布局的最佳实践；
- ⚠️ 避免在 <span> 中使用 —— 它会干扰文本流、影响换行逻辑，且不利于无障碍访问（screen reader 解析）；
- ? 响应式友好：所有单位均采用相对单位（em, vw），可随父级字体缩放自适应。
最终效果将严格呈现为：
○ Location 1 ○ Location xxx xxx xxx xxx xxx ← 第二行与“Location”首字母垂直对齐，实现专业级悬挂缩进
此方案简洁、语义正确、兼容性强（支持所有现代浏览器），是构建高可用性表单组件的推荐实践。
