I'm making a small survey and my "checkbox-label" & checkboxes will not align the same as the other labels. All the labels have the same class. I need it to align the same as the others.
Here is a link to my codepen to show you what I mean:
https://codepen.io/Saharalara/pen/xMGqPa
.labels {
display: inline-block;
text-align: right;
vertical-align: top;
margin-top: 20px;
width: 40%;
padding: 5px;
}
.rightTab {
display: inline-block;
text-align: left;
margin-top: 20px;
vertical-align: middle;
width: 48%;
padding: 5px;
}
.radio,
.checkbox {
position: relative;
left: -44px;
display: block;
padding-bottom: 10px;
}
<div class="rowTab">
<div class="labels">
<label id="checkbox-label" for="changes">What do you think we should do to improve our fabulous toilet if any...</br>there should'nt be any but choose please:</label>
</div>
<div class "rightTab">
<ul id="changes">
<li class="checkbox"><label><input name="prefer" value="1" type="checkbox" class="userRatings">Cleanliness</label></li>
<li class="checkbox"><label><input name="prefer" value="2" type="checkbox" class="userRatings">Friendliness</label></li>
<li class="checkbox"><label><input name="prefer" value="3" type="checkbox" class="userRatings">Everything, it's shite</label></li>
<li class="checkbox"><label><input name="prefer" value="4" type="checkbox" class="userRatings">Nothing, it's fantastic</label></li>
<li class="checkbox"><label><input name="prefer" value="5" type="checkbox" class="userRatings">No changes required, it's is the best toilet I've ever been to</label></li>
</ul>
</div>
</div>
You missed a =
. And, in this case, it's quite important. Change
<div class "rightTab">
... to:
<div class="rightTab">
See it working here.