HTML / CSS：如何创建可滚动的复选框水平列表 [英] HTML/ CSS: How to create a scrollable horizontal list of checkboxes

问题描述

我正在尝试创建一个带有横向排列的复选框的窗体，可以左/右滚动，同时保持每个复选框的样式看起来像一个按钮。 （如 here ）

不幸的是，复选框不断包装到下一行，我不知道为什么。

以下是我的代码：
http ：//jsfiddle.net/markocalvocruz/55jp59ho/

我在使用本网站作为参考：

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

上面的链接带有一个如图所示的标签列表。我的猜测是，将 display：inline-box 应用于< label> 标记时存在问题。我尝试用< span> 替换< label> ，但是我无法使复选框看起来像我希望他们能够（并且它也不能解决问题）。

所有包装完毕。在 id =container的另一个div下的ck-button > div，然后添加下面的css

  #container {
 width：2000px; 
} 
  

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

  .dates form .ck-button label {
 width：100％; 
身高：100％; 
} 
 .dates .ck-button input：checked + span {
 width：100％; 
身高：100％; 
} 
  

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).

解决方案

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%;
}

这篇关于HTML / CSS：如何创建可滚动的复选框水平列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！