包含 HTML 中复选框列表的可滚动框 [英] Scrollable box containing list of Checkboxes in HTML

问题描述

随附一张我为所需 UI 制作的模型图片.如您所见，我需要某种类型的包含复选框的可滚动框.

我想过一个可滚动的 div，但我找不到在 div 周围设置边框的方法?其次，我想到了 IFrame.但也不太确定这是否是我的最佳选择.

是否有人可能有更简单/更好的方法来做到这一点?

提前致谢！

解决方案

CSS:

.container { border:2px solid #ccc;宽度:300px；高度:100px；溢出-y:滚动；}

HTML:

<input type="checkbox"/>这是复选框<br/><input type="checkbox"/>这是复选框<br/><input type="checkbox"/>这是复选框<br/><input type="checkbox"/>这是复选框<br/><input type="checkbox"/>这是复选框<br/><input type="checkbox"/>这是复选框<br/><input type="checkbox"/>这是复选框<br/><input type="checkbox"/>这是复选框<br/><input type="checkbox"/>这是复选框<br/><input type="checkbox"/>这是复选框<br/>

外观:

这是您要找的吗?

Attached you'll see a picture of a mock up I did for the required UI. As you can see I need some type of scrollable box that contains checkboxes.

I've thought of a scrollable div, although I can't find a way to set a border around a div? Second I thought of an IFrame.. But also not too sure if this is my best option.

Does anybody perhaps have an easier/better way of doing this?

Thanks in advance!

解决方案

CSS:

.container { border:2px solid #ccc; width:300px; height: 100px; overflow-y: scroll; }

HTML:

<div class="container">
    <input type="checkbox" /> This is checkbox <br />
    <input type="checkbox" /> This is checkbox <br />
    <input type="checkbox" /> This is checkbox <br />
    <input type="checkbox" /> This is checkbox <br />
    <input type="checkbox" /> This is checkbox <br />
    <input type="checkbox" /> This is checkbox <br />
    <input type="checkbox" /> This is checkbox <br />
    <input type="checkbox" /> This is checkbox <br />
    <input type="checkbox" /> This is checkbox <br />
    <input type="checkbox" /> This is checkbox <br />
</div>

How it looks:

Is this what you are looking for?

这篇关于包含 HTML 中复选框列表的可滚动框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！