I'm currently working on a setup for toggle buttons using absolute positioning for labels on top of checkboxes. My goal is to have them aligned horizontally, but instead, they are stacking on top of each other.
<ul style="display: block; float: left;">
<li style="display: inline-block;">
<div class="btn_wrapper">
<input type="checkbox" value="1" id="newest" name=""/>
<label class="btn btn-sm btn-default" for="newest">Newest</label>
</div>
</li>
<li style="display: inline-block;">
<div class="btn_wrapper">
<input type="checkbox" value="1" id="popular" name=""/>
<label class="btn btn-sm btn-default" for="popular">Popular</label>
</div>
</li>
<li style="display: inline-block;">
<div class="btn_wrapper">
<input type="checkbox" value="1" id="price" name=""/>
<label class="btn btn-sm btn-default" for="price">Price</label>
</div>
</li>
</ul>
ul {
display: block;
li {
display: inline-block
.btn_wrapper {
position: relative;
clear: both;
label {
display: block;
cursor: pointer;
position: absolute;
top: 5px;
left: 5px;
z-index: 1;
background-color: #CCC;
}
input[type=checkbox], input[type=radio] {
position: absolute;
top: 5px;
left: 5px;
}
input[type=checkbox]:checked + label {
color: $shop_color_text_strong;
}
}
}
}
This is how the current layout appears: