通过为复选框容器添加 display: flex 并合理设置子项对齐与间距，可轻松实现多个自定义复选框（含图标和文字）的水平并排布局，同时保持样式一致性与交互效果。
通过为复选框容器添加 display: flex 并合理设置子项对齐与间距，可轻松实现多个自定义复选框（含图标和文字）的水平并排布局，同时保持样式一致性与交互效果。
在 Web 表单中，将多个复选框（Checkbox）水平排列而非默认的垂直堆叠，能显著提升界面紧凑性与用户体验。尤其在选项较少（如音频格式选择：WAV / MP3）时，侧向布局更符合现代 UI 设计规范。
核心实现方式是利用 CSS Flexbox 布局模型。只需为外层容器 .checkbox-wrapper-33 设置 display: flex，并控制主轴方向与子项间距即可：
.checkbox-wrapper-33 {
display: flex;
justify-content: flex-start; /* 可选：flex-start | center | space-between */
gap: 1.2em; /* 推荐替代 margin 的现代方案，更简洁可靠 */
}同时，为确保每个 <label class="checkbox"></label> 内部图标与文字对齐一致，建议补充以下基础样式：
.checkbox-wrapper-33 .checkbox {
display: flex;
align-items: center; /* 垂直居中对齐图标与文字 */
cursor: pointer;
}
.checkbox-wrapper-33 .checkbox__symbol {
flex-shrink: 0; /* 防止图标被压缩 */
margin-right: 0.84em; /* 图标与文字间距 */
width: 1.5em;
height: 1.5em;
border: 1px solid #3a3a3c;
border-radius: 0.1em;
transition: background-color 0.4s cubic-bezier(.11, .29, .18, .98);
}
.checkbox-wrapper-33 .checkbox__textwrapper {
margin: 0;
font-size: 1rem;
line-height: 1.5;
}⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 避免使用
float或inline-block实现并排——它们易受空白符影响且难以精准控制对齐； -
gap属性（推荐）比margin-left更健壮，无需处理首项额外间距问题； - 确保
<input type="checkbox">仍位于<label></label>内部最前位置，以维持语义化与可访问性（点击文字即可触发勾选）； - 若需响应式适配（如移动端竖排），可在媒体查询中重置为
flex-direction: column。
最终效果：两个带 SVG 图标的自定义复选框（WAV / MP3）水平并列，支持平滑动画、焦点反馈与无障碍操作，代码结构清晰、可维护性强。
