行のチェックボックスの整列

Question

3つのチェックボックスが連続しています。私はそれらの間に距離を保ちたい。私はパディング属性を試しました。しかし、それは動作していません。私はここに私のコードだスクリーンショットに

を添付しています -

<div class="row"> 
 
    <label class="cd-admin-create-patient-label">Role </label> 
 
    <input class="roleCheckbox" type="checkbox" name="role" ng-model="user.super" value="Super" />Super 
 
    <input class="roleCheckbox" type="checkbox" name="role" ng-model="user.power" value="Power" />Power 
 
    <input class="roleCheckbox" type="checkbox" name="role" ng-model="user.regular" value="Regular" />Regular 
 
</div>

Answer 1

input[name=role]{ 
 
    margin-left: 50px; 
 
}

<div class="row"> 
 
    <label class="cd-admin-create-patient-label">Role </label> 
 
    <input class="roleCheckbox" type="checkbox" name="role" ng-model="user.super" value="Super" />Super 
 
    <input class="roleCheckbox" type="checkbox" name="role" ng-model="user.power" value="Power" />Power 
 
    <input class="roleCheckbox" type="checkbox" name="role" ng-model="user.regular" value="Regular" />Regular 
 
</div>

margin

を使用してみてください

Answer 2

.role { 
 
margin-right:25px; /* you can here Give margin for label*/ 
 
} 
 

 
.boxes{ 
 

 
margin-right:55px; /* you Can here Give margin for chekboxes */ 
 

 
}

<div class = "row"> 
 

 
<label class="cd-admin-create-patient-label role">Role: </label> 
 

 
<span class="boxes"> 
 
<input class="roleCheckbox" type="checkbox" name="role" ng-model="user.super" value="Super"/>Super 
 
</span>  
 
      
 
<span class="boxes"> 
 
<input class="roleCheckbox" type="checkbox" name="role" ng-model="user.power" value="Power"/>Power </span> 
 
        
 
<span class="boxes"> 
 
<input class="roleCheckbox" type="checkbox" name="role" ng-model="user.regular" value="Regular" />Regular 
 
</span>   
 

 

 
</div>

Answer 3

あなたのチェックボックスに左マージンを使用し、このためのパディングを使用する必要はありません。私はmargin-left: 10vwをmargin-leftに使用しています。これはあなたのビューポートに応じてマージンを計算します。

.row>input[type="checkbox"]{ 
 
    margin-left: 10vw; 
 
}

<div class="row"> 
 
    <label class="cd-admin-create-patient-label">Role </label> 
 
    <input class="roleCheckbox" type="checkbox" name="role" ng-model="user.super" value="Super" />Super 
 
    <input class="roleCheckbox" type="checkbox" name="role" ng-model="user.power" value="Power" />Power 
 
    <input class="roleCheckbox" type="checkbox" name="role" ng-model="user.regular" value="Regular" />Regular 
 
</div>