I'm trying to set a collection of checkboxes both horizontally and vertically, but they don't come out uniformally. The labels for each checkbox can vary in size, e.g. one label for a checkbox says "International Casaulty Treaty" whereas another only says WIP.
I was going over this vertical example here. http://jsfiddle.net/zcuLgbxt/
How to can I neatly arrange them so they are all in alignment both vertically and horizontally? Thanks very much in advance!
Here is my simple HTML/CSS
<!DOCTYPE html>
<html>
<head>
<title>Filters 16</title>
</head>
<style>
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;
}
</style>
<body>
<center>
<ul>
<li>
<input type="checkbox" value="1" name="test[]" id="myid1">
<label class="vertical-list"for="myid1"> label1 label1 label1</label>
<input type="checkbox" value="2" name="test[]" id="myid2">
<label class="horizontal-list" for="myid2">label2</label>
</li>
<li>
<input type="checkbox" value="2" name="test[]" id="myid2">
<label class="vertical-list" for="myid2">label2label2label2</label>
<input type="checkbox" value="2" name="test[]" id="myid2">
<label class="horizontal-list" for="myid2">label2label2</label>
</li>
<li>
<input type="checkbox" value="4" name="test[]" id="myid3">
<label class="vertical-list" for="myid1"> label4 label4 label4</label>
<input type="checkbox" value="2" name="test[]" id="myid2">
<label class="horizontal-list" for="myid2">label2</label>
</li>
</ul>
</center>
Aucun commentaire:
Enregistrer un commentaire