CSS 设置复选框列表样式的最佳方法是什么
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1229856/
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
What is the best way to style a list of checkboxes
提问by MarcS
What I'd like to achieve is a layout like this
我想要实现的是这样的布局
some label [ ] checkbox 1
[ ] checkbox 2
[ ] checkbox 3
[ ] checkbox 4
[ ] represents a checkbox
[ ] 代表一个复选框
What markup and CSS would be best to use for this? I know this would be easy to do with a table I'm wondering if this is possible with divs
什么标记和 CSS 最适合用于此目的？我知道这很容易用一张桌子来做我想知道这是否可以用 div
回答by Magnar
I would use this markup:
我会使用这个标记：
<div id="checkboxes">
<label>some label</label>
<ul>
<li><input type="checkbox"> checkbox 1</li>
<li><input type="checkbox"> checkbox 2</li>
<li><input type="checkbox"> checkbox 3</li>
<li><input type="checkbox"> checkbox 4</li>
</ul>
</div>
and these styles:
和这些风格：
#checkboxes label {
float: left;
}
#checkboxes ul {
margin: 0;
list-style: none;
float: left;
}
Tables aren't evil, but they're used for the wrong reasons more often than not. They make for bigger html-files (bad for performance and bandwidth), usually with a more cluttered html-structure (bad for maintainability). As for tabular data however, they are excellent.
表格并不是邪恶的，但它们经常被用于错误的原因。它们产生更大的 html 文件（对性能和带宽不利），通常具有更混乱的 html 结构（对可维护性不利）。然而，对于表格数据，它们非常好。
回答by You
This very semantic HTML:
这个非常语义化的 HTML：
<fieldset class="checkboxgroup">
<p>some label</p>
<label><input type="checkbox"> checkbox 1</label>
<label><input type="checkbox"> checkbox 2</label>
<label><input type="checkbox"> checkbox 3</label>
<label><input type="checkbox"> checkbox 4</label>
</fieldset>
And this fairly simple CSS:
这个相当简单的 CSS：
.checkboxgroup{
width: 20em;
overflow: auto;
}
.checkboxgroup p{
width: 7em;
text-align: right;
}
.checkboxgroup label{
width: 12em;
float: right;
}
Adjust widths as needed.
根据需要调整宽度。
The proper way to do this really is to replace the pelement in my HTML with a legendelement, but this won't style the way you want it to without some pretty ugly CSS.
做到这一点的正确方法实际上是p用一个legend元素替换我的 HTML 中的元素，但是如果没有一些非常难看的 CSS，这不会按照您希望的方式设置样式。
回答by Sean Bright
<div style="float: left;">
some label
</div>
<div style="float: left;">
<input type="checkbox" /> checkbox 1<br />
<input type="checkbox" /> checkbox 2<br />
<input type="checkbox" /> checkbox 3<br />
<input type="checkbox" /> checkbox 4
</div>
回答by Erv
In my opinion its more some kind of list than a table (but You did not list the whole picture). To me it looks like a definition list so I would use it (if not I would stick to a unordered list example the Magnarsolution, adding labels.
在我看来，它更像是某种列表而不是表格（但您没有列出整个图片）。对我来说，它看起来像一个定义列表，所以我会使用它（如果不是，我会坚持使用无序列表示例Magnar解决方案，添加标签。
The definition list version:
定义列表版本：
<dl id="checkboxes">
<dt>same label or term</dt>
<dd><input type="checkbox" id="chk1" /><label for="chk1">checkbox 1</label></dd>
<dd><input type="checkbox" id="chk2" /><label for="chk2">checkbox 2</label></dd>
<dd><input type="checkbox" id="chk3" /><label for="chk3">checkbox 3</label></dd>
<dd><input type="checkbox" id="chk4" /><label for="chk4">checkbox 4</label></dd>
</dl>
