html - 如何在侧边栏 2 列中制作复选框
问题描述
所以我有一张表,我在其中添加了一个自定义菜单(我在 google 中搜索并找到了该菜单)。
自定义菜单显示一个对话框(见下图)它返回我在特定单元格中的所有数据验证,每个单元格都有一个复选框,因此我可以选择多个选项并将其返回到单个单元格中。
下面的代码:
<div style="font-family: arial;">
<? var data = valid(); ?>
<form id="form" name="form">
<? if(Object.prototype.toString.call(data) === '[object Array]') { ?>
<? for (var i = 0; i < data.length; i++) { ?>
<? for (var j = 0; j < data[i].length; j++) { ?>
<input type="checkbox" id="ch<?= '' + i + j ?>" name="ch<?= '' + i + j ?>" value="<?= data[i][j] ?>"><?= data[i][j] ?>
<? } ?>
<? } ?>
<? } else { ?>
<p>Maybe current cell doesn't have <a href="https://support.google.com/drive/answer/139705?hl=en">Data validation...</a></p>
<? } ?>
<br>
<br>
<input type="button" value="Fill Current Cell" onclick="google.script.run.fillCell(this.parentNode)" />
<input type="button" value="Clear Selections" onclick="reset()" />
</form>
</div>
任何人都知道我怎样才能使它成为 2 列而不是那样?感觉这个布局太乱了
解决方案
使用您的输入创建一个无序列表,并使用 css 为 ul 指定 2 列。
例子:
HTML
<ul>
<li><input type="checkbox">Option 1</li>
<li><input type="checkbox">Option 2</li>
<li><input type="checkbox">Option 3</li>
<li><input type="checkbox">Option 4</li>
<li><input type="checkbox">Option 5</li>
</ul>
CSS
ul {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
JS小提琴
ul {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
list-style-type: none;
}
<ul>
<li><input type="checkbox">Option 1</li>
<li><input type="checkbox">Option 2</li>
<li><input type="checkbox">Option 3</li>
<li><input type="checkbox">Option 4</li>
<li><input type="checkbox">Option 5</li>
</ul>
对于您的情况,您应该执行以下操作:
<ul>
<? for (var i = 0; i < data.length; i++) { ?>
<? for (var j = 0; j < data[i].length; j++) { ?>
<li><input type="checkbox" id="ch<?= '' + i + j ?>" name="ch<?= '' + i + j ?>" value="<?= data[i][j] ?>"></li>
<? } ?>
<? } ?>
</ul>
参考:
推荐阅读
- javascript - Python Flask - 错误:“无法加载模块脚本。强制执行严格的 MIME 类型检查”。适用于生产,而不是本地服务器
- visual-studio - 容器化的 .NET Core 2.2 docker build 在 VS 中失败,但在 CLI 中有效
- html - 检查器中这个空格的含义是什么?
- php - 在 PHP 中阻止临时邮件
- python - Networkx:将 MultiDiGraph 转换为 DiGraph
- android - 如何从 ExoPlayer2 中的实时视频中获取比特率
- excel - 使用在下拉列表中选择的单元格编号将行导出到 PDF/Word
- android - 应用程序无法在 Api 19 Android KitKat 4.4 中运行
- css - 覆盖我无法访问的 CSS 引导属性
- java - Java:生成一个随机值,然后将 1 添加到另一个变量中的值