复选框及其标签在同一级别

Question

当我用 ASP.NET 创建一个复选框时，它的标签总是在复选框的底部。但我希望它们处于同一水平，这样看起来不错。我实现了如下；

<table>
    <tr>
        <td>
            <input type="checkbox" id="chxAgreed" name="chxAgreed" />
        </td>
        <td>
            <label for="chxAgreed">Agreed</label>
        </td>
    </tr>
</table>

但我不想在我的标记中使用太多表格。没有桌子我怎么能做同样的事情？

Answer 1

如果问题只是关于标记（而不是 ASP，我不知道），这始终是处理复选框的好方法：

<label for="chxAgreed">
    <input type="checkbox" id="chxAgreed" name="chxAgreed" />
    Agreed
</label>

这比其他标记结构的好处：

• 对齐很容易，几乎是自动的
• 复选框和标签将是一个可单击区域，用于选中/取消选中输入，而不是两个单独的区域。
• 您实际上可以省略标签的for 属性，如果需要，也可以省略输入的id，这将暗示该标签用于它所包含的输入。
• 您可以使用此标记做一些pretty nice stuff with CSS。

我能想到的唯一缺点是，如果要设置标签文本（而不是整个标签）的样式，则必须将文本包装在 <span> 中。