我正在尝试创建一个带有水平排列的复选框的表单,可以向左/向右滚动,同时保持每个复选框的样式看起来像一个按钮。 (如图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>
但后来我无法让复选框看起来像我想要的那样(而且它也没有解决问题)。
最佳答案
用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%;
}
关于HTML/CSS : How to create a scrollable horizontal list of checkboxes,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49780867/