html - 在html中对齐a旁边的复选框

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

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>

这将使复选框出现在“专业知识”的右侧。