HTML/ CSS: How to create a scrollable horizontal list of checkboxes

Question

I am trying to create a form with checkboxes lined horizontally that can be scrolled left/right, while maintaining that each checkbox is styled to look like a button. (as shown here)

Unfortunately, the checkboxes keep wrapping onto the next line and I can't figure out why.

Here is my code: http://jsfiddle.net/markocalvocruz/55jp59ho/

I was using this website as a reference:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_menu_hor_scroll

The link aboveworks with a list of tags as shown. My guess is that there is an issue with applying display: inline-box to a <label> tag. I tried to replace <label> with <span> but then I am unable to make the checkboxes look as I want them to (and it doesn't fix the problem either).

Answer 1

Wrap all .ck-button divs under another div with id="container", then add following css

#container{
width:2000px;
}

and for your buttons do the following:

.dates form .ck-button label{
width:100%;
height:100%;
}
.dates .ck-button input:checked + span{
width:100%;
height:100%;
}