26

我想要实现的是这样的布局

一些标签 [] 复选框 1
            [ ] 复选框 2
            [ ] 复选框 3
            [ ] 复选框 4

[ ] 代表一个复选框

什么标记和 CSS 最适合用于此？我知道这很容易用一张桌子来做我想知道这是否可以用 divs

4

4 回答 4

36

我会使用这个标记：

<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>

和这些风格：

#checkboxes label {
  float: left;
}
#checkboxes ul {
  margin: 0;
  list-style: none;
  float: left;
}

表格并不邪恶，但它们经常被用于错误的原因。它们生成更大的 html 文件（不利于性能和带宽），通常具有更混乱的 html 结构（不利于可维护性）。然而，对于表格数据，它们非常好。

于 2009-08-04T20:55:05.057 回答
28

这个非常语义化的 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>

而这个相当简单的 CSS：

.checkboxgroup{
    width: 20em;
    overflow: auto;
}
.checkboxgroup p{
    width: 7em;
    text-align: right;
}
.checkboxgroup label{
    width: 12em;
    float: right;
}

根据需要调整宽度。

真正做到这一点的正确方法是将p我的 HTML 中的元素替换为一个legend元素，但是如果没有一些非常丑陋的 CSS，这将无法按照您想要的方式设置样式。

于 2009-08-04T21:07:00.400 回答
6

在我看来，它更像是某种列表而不是表格（但您没有列出整个图片）。对我来说，它看起来像一个定义列表，所以我会使用它（如果不是，我会坚持使用Magnar解决方案的无序列表示例，添加标签。

定义列表版本：

 <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>
于 2009-08-04T21:35:31.310 回答
5 
<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>
于 2009-08-04T20:53:57.947 回答