如何解决将溢出滚动条添加到“复选框”输入类型
我是HTML / CSS的新手。
我正试图在复选框下拉菜单中添加一个溢出滚动条,其最终用途将是横向滚动的图像库,可通过单击某些文本将其隐藏。换句话说,我想切换<div>
以显示和隐藏页面上的内容。
当前,我可以单击一些文本并隐藏/显示图像表。我遇到的麻烦是用溢出<div>
将表<div>
括起来,这将允许用户在切换后的表中左右滚动(至少是这样)。本质上,我已经用功能异常的代码写出了我要在下面做什么:
理想的HTML
<label for="my_checkbox"><h3>Show/hide</h3></label>
<input type="checkbox" id="my_checkbox" style="display:none;">
<div>
<div class="horizScroll">
<div class="horizTable">
<horizArticle>
<img src ="my_image.png">
</horizArticle>
<horizArticle>
<img src ="my_image.png">
</horizArticle>
</div>
</div>
</div>
理想的CSS
.horizScroll {
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: hidden;
}
.horizTable {
display: none;
table-layout: fixed;
width: 100%
}
horizArticle {
width: 300px;
height: 100px;
display: table-cell;
vertical-align: middle;
text-align: center;
input[type="checkbox"]:checked ~ .horizTable{
display: table;
}
input[type="checkbox"]:checked ~ .horizScroll{
overflow-x: scroll;
}
我已经弄弄了这个,但是我无法使用checkbox方法使表显示和溢出栏同时共存。因此,我希望这里的某人有解决问题的灵丹妙药。下面是已经可以使用的CSS / HTML。
工作HTML
<label for="my_checkbox"><h3>Show/hide</h3></label>
<input type="checkbox" id="my_checkbox" style="display:none;">
<div class="horizTable">
<horizArticle>
<img src ="my_image.png">
</horizArticle>
<horizArticle>
<img src ="my_image.png">
</horizArticle>
</div>
工作CSS
.horizScroll {
width: 100%;
height: 100%;
overflow-x: scroll;
overflow-y: hidden;
}
.horizTable {
display: none;
table-layout: fixed;
width: 100%
}
horizArticle {
width: 300px;
height: 100px;
display: table-cell;
vertical-align: middle;
text-align: center;
input[type="checkbox"]:checked + .horizTable{
display: table;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。