本文介绍使用 css flexbox 实现 radio 按钮后跟随文本的悬挂缩进（hanging indent），确保换行时第二行与第一行文字左对齐，而非与复选框对齐，提升长文本选项的可读性与专业排版效果。
本文介绍使用 css flexbox 实现 radio 按钮后跟随文本的悬挂缩进（hanging indent），确保换行时第二行与第一行文字左对齐，而非与复选框对齐，提升长文本选项的可读性与专业排版效果。
在表单设计中，当单选按钮（）后接较长的标签文本时，若文本自动换行，常见问题为：第二行文本顶格显示，导致视觉上与前一行不对齐，破坏阅读节奏。例如：
○ Location 1 ○ Location xxx xxx xxx xxx xxx ← 这里缩进异常，应与“Location”起始位置对齐
传统尝试如 text-indent + padding-left 对内联元素（如 ）无效，因其不适用于非块级或未设置宽度的上下文；而滥用 和
则违背语义化 HTML 原则，且难以响应式控制。
✅ 推荐方案：Flexbox 布局 + 精确尺寸控制
核心思路是将
以下是完整、可直接复用的 CSS 与 HTML 结构：
Monitored Ralph Loop
下载
一款AI工具，主要用于生成可直接复制粘贴的 Bash 脚本，用于 Ralph Wiggum/AI 代理循环（Codex、Claude Code、OpenCode、Goose）。适用于“拉尔夫循环”“Ralph Wiggum 循环”或 AI 循环请求，依据 PROMPT.md、AGENTS.md、SPECS、IMPLEMENTATION_PLAN.md 进行计划/构建，包含计划与构建模式、背压、沙箱及完成条件，适合需要提升相关任务效率的用户。
.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（已移除冗余 与
）：
<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 是实现悬挂缩进的基石：它锁定复选框尺寸，使所有
- ✅ margin-left: 0.2em 不是“缩进文本”，而是为文本预留视觉偏移，配合固定宽度复选框，自然形成悬挂效果；
- ✅ 移除
改用 margin-bottom，符合 CSS 控制布局的最佳实践； - ⚠️ 避免在 中使用 —— 它会干扰文本流、影响换行逻辑，且不利于无障碍访问（screen reader 解析）；
- ? 响应式友好：所有单位均采用相对单位（em, vw），可随父级字体缩放自适应。
最终效果将严格呈现为：
○ Location 1 ○ Location xxx xxx xxx xxx xxx ← 第二行与“Location”首字母垂直对齐，实现专业级悬挂缩进
此方案简洁、语义正确、兼容性强（支持所有现代浏览器），是构建高可用性表单组件的推荐实践。
