html - 将复选框右对齐

Question

我正在尝试对齐复选框，使其位于重复出现的右侧，但它不起作用。我已经尝试检查元素并尝试了不同的方法，但我仍然无法让它向右移动。

<div class="container">
  <div class="row center">
    <p>Recurring:</p>
    <form action="#">
        <input type="checkbox" id="check1">
        <label for="check1"></label>
    </form>
  </div>
</div>

Answer 1

为您的 p 元素和 form 元素提供 display:inline-block; 属性。

默认情况下，p 和 form 元素都具有 display:block; 属性。

p{
  display:inline-block;  
}
form{
  display:inline-block;  
}

<div class="container">
  <div class="row center">
    <p>Recurring:</p>
    <form action="#">
        <input type="checkbox" id="check1">
        <label for="check1"></label>
    </form>
  </div>
</div>