右对齐复选框答案

【问题标题】：Aligning Checkbox to the right右对齐复选框
【发布时间】：2016-04-04 17:07:11
【问题描述】：

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

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

【问题讨论】：

标签： html css material-design materialize

【解决方案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>

【讨论】：

【解决方案2】：

或者您可以将“重复”文本添加到标签like this

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

【讨论】：

不客气，如果你没问题，别忘了把问题标记为已解决:)

【解决方案3】：

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

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>

【讨论】：