11

我目前正在研究一个带有很多复选框的大型公式。有没有办法像网格一样显示它们，例如 4 列？

我知道你可以用表格来做到这一点，但如果不是真的需要的话，我真的不想用它们来设置样式。那么有没有办法使用 CSS 呢？

示例：
[]text []text []text []text
[]text []text []text []text
...

4

6 回答 6

42

这是一个解决方案，带有完整的复选框标记和CSS以及一个工作示例。

.checkbox-grid li {
  display: block;
  float: left;
  width: 25%;
}
<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>

于 2013-02-04T16:21:10.287 回答
4

columns 属性是这个任务的一个很好的选择，因为你可以很容易地让它响应。

http://jsfiddle.net/FmV9k/1/（不包括前缀）

.checkboxes {
    columns: 4 8em;
}


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

我们指定了 4 列，但它们的宽度必须至少为 8em。如果所有 4 列都没有足够的空间，那么它将根据需要删除列以确保满足最小宽度。

于 2013-02-04T16:37:29.653 回答
3

试试 ul li

<div>
<ul class="chk">
<li>checkbox</li>
<li>checkbox</li>
<li>checkbox</li>
<li>checkbox</li>

<li>checkbox</li>
<li>checkbox</li>
<li>checkbox</li>
<li>checkbox</li>

</ul>
</div>


.chk 
{
  width:100%;
}
.chk li
{
   display:inline-block;
   width:25%;
}
于 2013-02-04T16:13:27.527 回答
3

尝试使用“ float:left;display:table-cell”和伪类“ :nth-child”和“ float:none”

看看这个：http: //jsfiddle.net/7gdgQ/1/（已评论）

还有祝你好运！

于 2013-02-04T17:49:31.007 回答
1

你当然可以使用 div 之类的来这样做，不过不要害怕表格。它们确实有相关的应用程序，如果您尝试做的事情需要使用它们，您应该使用它们。

这是一个基于 div 的 css 解决方案：http: //jsfiddle.net/XugFX/

HTML

<div class="row">
    <div class="col"><input type="checkbox" /><label>Box 1</label></div>
    <div class="col"><input type="checkbox" /><label>Box 2</label></div>
    <div class="col"><input type="checkbox" /><label>Box 3</label></div>
    <div class="col"><input type="checkbox" /><label>Box 4</label></div>
</div>
<div class="row">
    <div class="col"><input type="checkbox" /><label>Box 5</label></div>
    <div class="col"><input type="checkbox" /><label>Box 6</label></div>
    <div class="col"><input type="checkbox" /><label>Box 7</label></div>
    <div class="col"><input type="checkbox" /><label>Box 8</label></div>
</div>

CSS

.row {
    border: 1px solid red;
    overflow: hidden;
    padding: 5px;
}

.col {
    border: 1px solid blue;
    float: left;
    padding: 5px;
    margin-right: 5px;
}
于 2013-02-04T16:20:40.830 回答
0

您可以浮动复选框并将每个复选框的宽度设为父容器的 25%。

于 2013-02-04T16:08:24.243 回答