对齐html旁边的复选框

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标记，而不是复选框

之外的杂散文本

Demo

正确的方式

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

Answer 2

由于您已经在使用表，只需将输入标记放入另一个td标记中，如下所示：

<tr>

 <td>Expertise</td>
 <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>
 </td>

</tr>

这将使复选框显示在＆＃34;专业知识＆＃34;。

的右侧