Question

我正在尝试将包含复选框和标签的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>

Answer 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>

Answer 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>

如何将潜水内的复选框和标签移动到卡的右侧

2 个答案: