如何创建可滚动的复选框水平列表

如何创建可滚动的复选框水平列表

本文介绍了HTML / CSS:如何创建可滚动的复选框水平列表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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



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

以下是我的代码:



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





上面的链接带有一个如图所示的标签列表。我的猜测是,将 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:如何创建可滚动的复选框水平列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-31 04:05