Html 像网格一样排列多个复选框。没有桌子？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14690621/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Arrange multiple checkboxes like a grid. Without tables?
提问by h3ader
I'm currently working on a big formular with a lot of checkboxes. Is there a way to display them like a grid, e.g. 4 columns?
我目前正在研究一个带有很多复选框的大公式。有没有办法像网格一样显示它们，例如 4 列？
I know you can do this with tables but I don't really want to use them to style things if it is not really necessary. So is there a way with CSS?
我知道你可以用表格来做到这一点，但如果不是真的有必要，我真的不想用它们来设计东西。那么有没有办法使用 CSS 呢？
Example:
[]text []text []text []text
[]text []text []text []text
...
示例：
[]text []text []text []text
[]text []text []text []text
...
回答by Axel
Here is a solution, with complete checkbox markup and CSS, and a working example.
这是一个解决方案，带有完整的复选框标记和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>回答by cimmanon
The columns property is a fine choice for this task, since you can make it responsive very easily.
columns 属性是此任务的不错选择，因为您可以非常轻松地使其响应。
http://jsfiddle.net/FmV9k/1/(prefixes not included)
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>
We've specified 4 columns, but they must be a minimum of 8em wide. If there's not enough room for all 4 columns, then it will remove columns as necessary to ensure the minumum width is met.
我们指定了 4 列，但它们的宽度必须至少为 8em。如果所有 4 列都没有足够的空间，那么它将根据需要删除列以确保满足最小宽度。
回答by gmo
Try with "float:left;display:table-cell" and pseudo class ":nth-child" and "float:none"
尝试使用“ float:left;display:table-cell”和伪类“ :nth-child”和“ float:none”
check this out: http://jsfiddle.net/7gdgQ/1/(is commented)
看看这个：http: //jsfiddle.net/7gdgQ/1/（被评论）
And good luck!
还有祝你好运！
回答by Harshit Tailor
Try ul li
试试 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%;
}
回答by Michael
You can certainly use div's and such to do so, don't be afraid of tables though. They do have pertinent applications and you should use them if what your trying to do warrants using them.
您当然可以使用 div 等来这样做，但不要害怕表格。它们确实有相关的应用程序，如果您尝试做的事情需要使用它们，您应该使用它们。
Here is a div based css solution: http://jsfiddle.net/XugFX/
这是一个基于 div 的 css 解决方案：http: //jsfiddle.net/XugFX/
HTML
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
CSS
.row {
border: 1px solid red;
overflow: hidden;
padding: 5px;
}
.col {
border: 1px solid blue;
float: left;
padding: 5px;
margin-right: 5px;
}
回答by Eric Goncalves
You can float the checkboxes and give each a width of 25% of the parent container.
您可以浮动复选框并为每个复选框指定父容器的 25% 的宽度。
