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

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