如何定位与输入字段相关的标签标签

Question

我在整理这个问题时遇到了问题。

这是我的 HTML

 <form>
  <p><label for="comp-name">Name:</label>
    <input type="text" name="comp-name"></input>
  </p>
  <p>
    <label for="company-address">Address:</label>
    <textarea name="company-address"></textarea>
  </p>
  <p>
    <label for="postcode">Postcode:</label>
    <input type="text" name="postcode"></input>
  </p>
  <p>
    <label for="phone">Phone Number:</label>
    <input type="text" name="phone"></input>
  </p>
  <p>
    <label for="email">Email:</label>
    <input type="text" name="email"></input>
  </p>
</form>

这是我希望表单的样子：

我很难弄清楚如何将标签放在输入/文本区域的左上角。

原文由 Saint Dee 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果我理解正确，一个简单的：

 label {
    vertical-align: top;
}

应该给你你想要的结果。

小提琴：http: //jsfiddle.net/N7e67/2/

原文由 cernunnos 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以将标签放在表格的左列，将字段放在右列，然后将它们放置在各自的单元格中

<table>
    <tr>
        <td>(label)</td>
        <td>(input)</td>
    </tr>
    ...
</table>

原文由 jbangerter 发布，翻译遵循 CC BY-SA 3.0 许可协议