默认情况下，label 元素常被浏览器或 css 设为 block 显示，导致与相邻 input 换行；只需将其 display 属性设为 inline 或 inline-block 即可实现并排布局。
默认情况下，label 元素常被浏览器或 css 设为 block 显示，导致与相邻 input 换行；只需将其 display 属性设为 inline 或 inline-block 即可实现并排布局。
在表单布局中，让 <label> 与对应的 <input>（尤其是复选框 type="checkbox"）严格保持在同一行，是前端开发中的基础但易被忽视的细节。问题根源通常不在于 HTML 结构本身，而在于 CSS 的默认或显式渲染行为——例如，某些重置样式、框架（如 Bootstrap）或自定义规则会将 <label> 设为 display: block 或 display: table-cell，从而强制换行。
✅ 正确做法是：为与 checkbox 配对的 <label> 显式声明内联显示方式：
/* 推荐：使用 inline-block，便于控制垂直对齐和间距 */
.schedule-option label {
display: inline-block;
margin-right: 12px; /* 可选：添加适当间隔 */
vertical-align: middle; /* 确保与 checkbox 垂直居中对齐 */
}
/* 同时确保 input 本身不被意外设为 block */
.schedule-option input[type="checkbox"] {
vertical-align: middle;
}对应 HTML 结构建议优化为语义化分组（提升可访问性与维护性）：
<label for="schedule-preference">Schedule Preferences:</label><br> <div class="schedule-option"> <input type="checkbox" id="weekday" name="schedule_preference" value="weekday"> <label for="weekday">Weekday</label> <input type="checkbox" id="weekday_evenings" name="schedule_preference" value="weekday_evenings"> <label for="weekday_evenings">Weekday evenings</label> <input type="checkbox" id="weekend" name="schedule_preference" value="weekend"> <label for="weekend">Weekend</label> </div>
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 避免滥用 float 实现同行布局（已过时，易引发清除浮动问题）；
- 不要依赖 <br> 强制换行来“修复”布局——应通过 CSS 控制流式行为；
- 若使用 CSS 重置库（如 normalize.css），检查其是否修改了 label 的默认 display 值；
- inline-block 比 inline 更灵活：支持设置 width/height/margin/padding，且不会受空格文本节点影响（避免意外间隙）。
? 小结：一行代码即可治本——给关联 label 加上 display: inline-block 并配合 vertical-align: middle，即可稳健实现 checkbox 与文字的水平对齐，兼顾语义、可访问性与现代 CSS 实践。
