Question

我想创建一个复选框网格

<ul class="checkbox-grid">
    <li><input type="checkbox" name="text1" value="value1" /><label for="text1">Text 1</label></li>
    <li><input type="checkbox" name="text2" value="value2" /><label for="text2">Text 2</label></li>
    <li><input type="checkbox" name="text3" value="value3" /><label for="text3">Text 3</label></li>
    <li><input type="checkbox" name="text4" value="value4" /><label for="text4">Text 4</label></li>
    <li><input type="checkbox" name="text5" value="value5" /><label for="text5">Text 5</label></li>
    <li><input type="checkbox" name="text6" value="value6" /><label for="text6">Text 6</label></li>
    <li><input type="checkbox" name="text7" value="value7" /><label for="text7">Text 7</label></li>
    <li><input type="checkbox" name="text8" value="value8" /><label for="text8">Text 8</label></li>
</ul>

但是要将复选框放在彼此之下，（例如，彼此之间的5个复选框，然后是新列）

在这个例子中

text1   text6
text2   text7
text3   text8
text4    ...
text5

我尝试了类似this之类的东西，但这些并不是彼此相邻，而是彼此相邻，是否有可能？

Answer 1

在CSS中设置

.checkbox-grid {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}

Answer 2

这是解决问题的简单CSS技巧。 CSS Columns

所以你可以简单地添加

.checkbox-grid {
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
}

转到您的css并移除.checkbox-grid li

创建复选框网格

2 个答案: