chan chan - 1 year ago 118
CSS Question

Alignment of checkbox in a row

I have 3 checkboxes in a row. I want to keep distance between them. I have tried padding attribute. It is not working though. I am attaching the screenshot

enter image description here
Here's my 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 Source

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>

Try to use margin

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download