为复选框列表设置样式的最佳方法是什么

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最适合用于此？我知道这对表很容易，我想知道这是否可能与divs

4 个解决方案

#1

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结构（对可维护性不利）。至于表格数据，它们非常好。

#2

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 p element in my HTML with a legend element, but this won't style the way you want it to without some pretty ugly CSS.

实现这一目的的正确方法是用我的HTML替换带有图例元素的p元素，但如果没有一些非常难看的CSS，这将不会按照你想要的方式设置样式。

#3

<div style="float: left;">
    some label
</div>

<div style="float: left;">
    <input type="checkbox" />&#160;checkbox 1<br />
    <input type="checkbox" />&#160;checkbox 2<br />
    <input type="checkbox" />&#160;checkbox 3<br />
    <input type="checkbox" />&#160;checkbox 4
</div>

#4

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 Magnar solution, 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>

#1