如何通过CSS调整复选框与标签顺序（不修改HTML结构）

无需修改HTML结构，通过Flexbox的order属性即可调整复选框与标签的显示顺序，具体CSS代码如下：

/* 将控制组设为flex容器，支持内部元素排序 */
.control-group {
  display: flex;
  align-items: center; /* 让标签与复选框垂直居中对齐 */
  gap: 8px; /* 给两者添加间距，优化视觉体验，可按需调整 */
}

/* 让包含复选框的controls容器排在标签前 */
.controls {
  order: -1;
}

/* 保留原有inline-flex设置，确保元素正常渲染 */
.control-label, .controls {
  display: inline-flex;
}

代码解释 #

• control-group设置为flex布局后，内部的control-label和controls元素可以通过order属性重新定义排列顺序。
• align-items: center避免标签和复选框因高度差异出现垂直错位。
• order: -1降低controls的排列优先级，使其显示在control-label的左侧，实现“复选框在前，标签在后”的效果。

内容的提问来源于stack exchange，提问作者Webdeveloper_Jelle