连续对齐复选框

Question

我连续有3个复选框。我想保持他们之间的距离。我试过padding属性。虽然不行。我正在附上截图

这是我的代码 -

<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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

尝试使用margin

Answer 2

＆＃13;

＆＃13;

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

.boxes{

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

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>