如何在侧边栏 2 列中制作复选框

Question

所以我有一张表，我在其中添加了一个自定义菜单（我在 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] ?>&nbsp;
<? } ?>
<? } ?>
<? } 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 列而不是那样？感觉这个布局太乱了

Answer 1

使用您的输入创建一个无序列表，并使用 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>

参考资料：

• List in columns