Alignement de case à cocher dans une rangée

Question

J'ai trois cases à cocher. Je veux garder la distance entre eux. J'ai essayé l'attribut de remplissage. Cela ne fonctionne pas bien. Je joins la capture d'écran

Voici mon code -

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

Essayez d'utiliser 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

Vous ne devez pas utiliser le rembourrage pour cela, utiliser la marge de gauche à vos cases à cocher. J'ai utilisé margin-left: 10vw pour margin-left qui va calculer la marge en fonction de votre viewport.

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