checkboxes horizentally

how to layout checkboxes horizentally by setting the width to a %

by Akram kamal

HTML

<div style="width:100%">
    <label><input type="checkbox" name="chess" value="Chess">abc</label>
<label><input type="checkbox" name="checkers" value="Checkers">abcf</label>
    <label><input type="checkbox" name="checkers" value="Checkers">abcf</label>
        <label><input type="checkbox" name="checkers" value="Checkers">abcf</label>
            <label><input type="checkbox" name="checkers" value="Checkers">abcf</label>
 
</div>

CSS

span {
  display: inline-block;
  width: 100px;
}
label {
  display: inline-block;
  width: 30%;
}