将复选框右对齐

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>

Answer 2

或者您可以将 "Recurring" 文本添加到标签 like this

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

Answer 3

使用inline-block div 内联对齐元素：

https://jsfiddle.net/Bendrick92/0o6mwdtz/

.left, .right {
  display: inline-block;
}

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

将复选框右对齐

Aligning Checkbox to the right

html

css

materialize

material-design