对齐html中<td>旁边的复选框

Question

我有一个关于使用html/CSS的基本CSS/html问题.我认为这是相当基本和明显的,但它没有按预期工作.

在这个基本图像中,我希望标签位于专业知识的右侧

(创建用户选择其专业知识的注册页面)

我相信这基本上就是这样

 <tr>

 <td>Expertise</td>
  <input type="checkbox" style="vertical-align: left; margin: 12px;"> Label </input><br>            
  <input type="checkbox" style="vertical-align: left; margin: 12px;"> Label 2 </input>

</tr>

但是这不符合预期.

Answer 1

首先你的标记是无效的,table元素只能包含table作为其子元素的元素,tbody, thead, th, tr, td等等,而不是其他元素,相反,你可以将这些复选框放在里面td

其次输入标签没有任何明确的结束标签,你需要自己关闭它,否则就像没有关闭那样 <br>

第三 - 使用label标签而不是复选框之外的杂散文本

演示

正确的方式

<table>
  <tr>
    <td class="valign">
        Expertise
    </td>
    <td>
        <input type="checkbox" style="vertical-align: left; margin: 12px;" />
        <label>Label</label><br />
        <input type="checkbox" style="vertical-align: left; margin: 12px;" />
        <label>Labe2</label>
    </td>
  </tr>
</table>

CSS

.valign {
    vertical-align: top;
}