Is it possible to align a collection of checkboxes both vertically and horizontally, even when the labels vary in size?
I found an example that demonstrates vertical alignment. Click here to view.
How can I neatly arrange these checkboxes so that they are uniform in their alignment? Thank you for your help!
Below is my basic HTML/CSS code:
li {
margin: 5px;
}
input {
width: 20px;
background-color: blue;
position: relative;
left: 200px;
vertical-align: middle;
}
.vertical-list {
width: 200px;
position: relative;
left: -20px;
display: inline-block;
vertical-align: middle;
}
li{
list-style:none;
}
.horizontal-list{
display: inline;
}<center>
<ul>
<li>
<input type="checkbox" >
<label class="vertical-list"> label1 label1 label1</label>
<input type="checkbox" >
<label class="horizontal-list" for="myid2">label2</label>
</li>
<li>
<input type="checkbox" >
<label class="vertical-list" >label2label2label2</label>
<input type="checkbox">
<label class="horizontal-list" for="myid2">label2label2</label>
</li>
<li>
<input type="checkbox" >
<label class="vertical-list" > label4 label4 label4</label>
<input type="checkbox" >
<label class="horizontal-list" >label2</label>
</li>
</ul>
</center>