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

Question

我正在尝试创建一个带有水平排列的复选框的表单，可以向左/向右滚动，同时保持每个复选框的样式看起来像一个按钮。 (如图here)

不幸的是，复选框一直换行到下一行，我不明白为什么。

这是我的代码: http://jsfiddle.net/markocalvocruz/55jp59ho/

我使用这个网站作为引用:

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

上面的链接使用如图所示的标签列表。我的猜测是应用 display: inline-box 有问题到 <label>标签。我试图替换 <label>与 <span>但后来我无法让复选框看起来像我想要的那样(而且它也没有解决问题)。

Answer 1

用id="container"将所有.ck-button div包裹在另一个div下，然后添加以下css

#container{
width:2000px;
}

并为您的按钮执行以下操作:

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