我目前正在制作一个包含大量复选框的大型公式。 有没有办法像网格一样显示它们,例如4列?
我知道你可以用表格来做这件事,但如果不是真的有必要,我真的不想用它们来设计。那么有没有CSS的方法呢?
例:
[] text [] text [] text [] text
[] text [] text [] text [] text
...
答案 0 :(得分:31)
这是一个解决方案,包含完整的复选框标记和 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>
答案 1 :(得分: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%;
}
答案 2 :(得分:3)
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列,那么它将根据需要删除列以确保满足最小宽度。
答案 3 :(得分:3)
尝试使用“float:left;display:table-cell
”和伪类“:nth-child
”和“float:none
”
检查一下:http://jsfiddle.net/7gdgQ/1/(已评论)
祝你好运!
答案 4 :(得分: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;
}
答案 5 :(得分:0)
您可以浮动复选框,并为每个容器提供25%的宽度。