如何将div内的复选框和标签移动到卡片的右侧答案

【问题标题】：How to move checkbox & label inside dive to the right of the card如何将div内的复选框和标签移动到卡片的右侧
【发布时间】：2020-02-06 20:21:05
【问题描述】：

我正在尝试将卡片内包含复选框和标签的 div 移动到卡片的右侧。

到目前为止，它只停留在左侧。我已经多次尝试“float：right”，无论位置是否为绝对位置，我只设法将标签而不是复选框移动到右侧。我正在使用引导程序并尝试在类中添加 text-right 并且正如预期的那样它只移动了标签。

如何将 div 内的标签和复选框移动到卡片的右侧？

<div style="position:absolute;"class="text-right boxes">
    <input type="checkbox" id="box-2">
    <label for="box-2">On/Off</label>
</div>

【问题讨论】：

标签： html bootstrap-4

【解决方案1】：

label,input{
float:right;
margin-top:10%;}

div{
width:80%;}

<div  style="position:absolute;"class="text-right boxes">
<label for="box-2">On/Off</label>
<input type="checkbox" id="box-2">
    
</div>

【讨论】：

【解决方案2】：

有很多方法可以定位元素。我更喜欢flexbox。

.boxes {
  display: flex;
  justify-content: flex-end;
  width: 250px;
  border: dashed black 1px;
}

<div class="boxes">
    <input type="checkbox" id="box-2">
    <label for="box-2">On/Off</label>
</div>

如果你使用bootstrap，你可以选择关注。

.boxes {
  width: 250px;
  margin-bottom: 10px;
  border: dashed black 1px;
}

.boxes label {
  margin: 0;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="boxes text-right">
  <input type="checkbox" id="box-2">
  <label for="box-2">On/Off</label>
</div>

<div class="boxes d-flex justify-content-end align-items-center">
  <div>
    <input type="checkbox" id="box-2">
    <label for="box-2">On/Off</label>
  </div>
</div>

<div class="boxes">
  <div class="float-right">
    <input type="checkbox" id="box-2">
    <label for="box-2">On/Off</label>
  </div>
  <div class="clearfix"></div><!--NB! You have <clear: value> after using float!-->
</div>

【讨论】：