fieldset 默认非 flex 容器，设 display: flex 会破坏 legend 的语义定位与可访问性；应保持 fieldset 原生 display，将 flex 应用于外层容器或内部 wrapper，并确保 legend 与控件的逻辑关联。
fieldset 默认不是 flex 容器，直接给它设 display: flex 会破坏原生语义结构——最明显的问题是 <legend> 不再“嵌入上边框”，而是变成普通子元素，可能错位、被裁剪，甚至脱离可访问性上下文。
为什么 fieldset + flex 容易出问题
fieldset 的视觉机制依赖浏览器内置渲染逻辑：<legend> 是它唯一的合法首子元素，且被设计为“浮动在边框左上角”。一旦启用 flex，这个机制就失效：
- legend 失去锚定位置，常卡在左上角或与内容重叠
- 父容器的 border 和 padding 不再作为 legend 的定位参照，导致标题贴边、文字被裁
- 屏幕阅读器可能无法将 legend 与内部控件正确关联，WCAG 合规风险上升
- 嵌套 fieldset 或配合 disabled 属性时，焦点行为和禁用逻辑也会异常
安全替代方案：不改 fieldset，只包装容器
保留 fieldset 语义，把 flex 布局移到它的外层或内部 wrapper 上：
- 在外层加一个
<div class="form-group">，对这个 div 设display: flex，fieldset 保持原样 - 在 fieldset 内部，用
<div class="form-row">包裹每组 label+input，再对这个 div 设 flex - 若必须让 legend 右对齐，不要动 fieldset，而是给 legend 设
display: block; margin-left: auto;
如果坚持用 flex 控制 fieldset 内部布局
必须做三件事来补救语义和视觉断裂：
立即学习“前端免费学习笔记（深入）”；
- legend 改用
display: inline-flex; align-items: center;，比 block 更稳，不易换行 - fieldset 本身加
position: relative;和padding-top: 2rem;，为 legend 留出视觉空间 - legend 内部文字用
margin: 0;，再手动用transform: translateY(-50%); top: 0; position: absolute;微调（仅限视觉修复，不可用于无障碍关键路径）
更推荐的做法：用语义+现代 CSS 组合
fieldset 负责分组语义和可访问性，flex 负责排列控制，二者各司其职：
- fieldset 保留默认 display（即 block），只设
border: 1px solid #ddd; padding: 1rem; - 每个表单行用
<div class="form-row">，设display: flex; align-items: center; gap: 0.75rem; - label 固定宽度或
flex-shrink: 0;，input 设flex: 1;占满剩余空间 - legend 用
font-weight: bold; margin-bottom: 0.5rem;明确区分层级，不依赖位置表达结构
