使文本与复选框对齐

Question

复选框右侧的文本分为两行。当我使用float：right属性时，文本将移至复选框下方，如果没有此属性，则一行将移至复选框右侧，其余部分将从复选框下方开始

下面是具有float属性的代码段：

input[type=checkbox] {
  margin-top: 10px;
  margin-right: 10px;
}

label {
  width: auto;
  float: right;
}

<input type="checkbox" name="optIn" value="Y">
<label for="ext-comp-1035">I would like to receive email from you. By checking the box you agree that you have read the Privacy Policy and Terms of Use</label><br>

Answer 1

用input和label包裹container

flex

Answer 2

尝试使用Value1 Value2 Value3 Is this what you want? A simplified version of current code -10,00 NULL -10,00 NULL NULL NULL 5,00 5,00 NULL NULL -5,00 NULL -0,71 4,29 4,2900 NULL 5,00 8,00 -3,00 3,0000 和display: flex;轻松完成对齐。示例代码：

align-items: center;

.d-flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.align-items-center {
  align-items: center;
}

.input-checkbox {
  margin-right: 10px;
}