如何使用HTML或CSS将Checkbox置于文本标签前方并实现对齐？

要让Checkbox显示在文本前方并实现整齐对齐，只需调整HTML结构并添加少量CSS即可：

1. 调整HTML元素顺序 #

将每个<input>标签移到对应<label>的文本内容之前，确保<label>的for属性与<input>的id保持匹配（这一点你已经正确实现）。修改后的HTML代码如下：

<label for="needs">请选择你拥有的设备：</label>
<div class="checkbox-group">
  <label for="monitor" class="checkboxes">
    <input id="monitor" name="monitor" type="checkbox" value="1" />
    显示器
  </label>
  <label for="Keyboard" class="checkboxes">
    <input id="Keyboard" name="Keyboard" type="checkbox" value="1" />
    键盘
  </label>
  <label for="Mouse" class="checkboxes">
    <input id="Mouse" name="Mouse" type="checkbox" value="1" />
    鼠标
  </label>
  <label for="Dock" class="checkboxes">
    <input id="Dock" name="Dock" type="checkbox" value="1" />
    扩展坞
  </label>
  <label for="webcam" class="checkboxes">
    <input id="webcam" name="webcam" type="checkbox" value="1" />
    摄像头
  </label>
  <label for="Printer" class="checkboxes">
    <input id="Printer" name="Printer" type="checkbox" value="1" />
    打印机
  </label>
</div>

2. 添加CSS实现精准对齐 #

通过Flex布局可以让Checkbox与文本垂直居中对齐，同时保证所有Checkbox整齐排列：

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 8px; /* 调整选项之间的间距 */
}

.checkboxes {
  display: flex;
  align-items: center;
  gap: 6px; /* 调整Checkbox与文本的间距 */
  cursor: pointer;
}

.checkboxes input {
  width: 16px;
  height: 16px; /* 统一Checkbox大小 */
}

效果说明 #

• 调整<input>的位置直接实现了Checkbox在前的视觉效果。
• Flex布局确保Checkbox与文本垂直对齐，gap属性让整体布局更整洁。
• 保留<label>与<input>的关联，保证点击文本也能选中Checkbox的交互体验。

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