I want to set these checkboxes up in a table style grid without using a table in HTML. I was trying CSS but it seems like I will need to add a class to each tag for each slot.
Is there a way I can avoid this?
<div class = permissions_grid>
<div class="column_labels"></div>
<label>All Members</label>
<label>Relevant Experience</label>
<label>HUB Moderators</label>
<label>Invited Members</label>
</div>
<div class="row_edit_documents">
<label>Edit Documents</label>
<input type="checkbox" class="all-D" name="edit_docs" value="all">
<input type="checkbox" class="relevant" name="edit_docs" value="relevant">
<input type="checkbox" class="moderators" name="edit_docs" value="moderators">
<input type="checkbox" class="invited" name="edit_docs" value="invited" checked>
</div>
<div class = "row_add_categories">
<label>Add Feedback Categories</label>
<input type="checkbox" class="all-C" name="add_cat" value="all" checked>
<input type="checkbox" class="relevant" name="add_cat" value="relevant">
<input type="checkbox" class="moderators" name="add_cat" value="moderators">
<input type="checkbox" class="invited" name="add_cat" value="invited">
</div>
<div class = "row_move_com_cat">
<label>Move Comments and Categories</label>
<span class="x">X</span>
<input type="checkbox" class="relevant" name="move" value="relevant">
<input type="checkbox" class="moderators" name="move" value="moderators" checked>
<input type="checkbox" class="invited" name="move" value="invited" checked>
</div>
</div>
The first row starts at position 2 which I think I can easily mark in CSS. But How do I make sure all of the inputs and labels are even spaced?
Thank you
Kevin
Aucun commentaire:
Enregistrer un commentaire