チェックボックスの右側への整列

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

またはあなたがラベルに要素をインライン揃える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/

を私は今、それとその作業を試してみましたが、210

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