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

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>

这是我希望表单的样子：

这是jsfiddle链接。

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

Answer 1

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

label {
    vertical-align: top;
}

应该给你你想要的结果。

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

Answer 2

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

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

Answer 3

尝试将您的标签和输入类型放在 div 标签内

<p><div><label for="comp-name">Company Name:</label></div>
    <div> <input type="text" name="comp-name"></input></div>
 </p>

这应该可以帮助你。如果这不是您所期望的，请详细说明您希望看到的内容。

Answer 4

您可以尝试使用此样板http://www.csskarma.com/lab/contactForm/或本教程http://designfestival.com/position-text-labels-on-forms-using%C2%A0css/

• PS：供您参考，标签for属性应引用id输入的一个。
• PPS：你可能会觉得这篇文章很有趣http://www.lukew.com/ff/entry.asp?1502

Answer 5

您可以使用此代码来定位您的对象： style="z-index: 1; left: -3px; top: 202px; position: absolute; height: 132px; width: 494px"

根据表单设计更改左侧，顶部，高度和宽度。

<label for="comp-name" style="z-index: 1; left: -3px; top: 202px; position: absolute; height: 132px; width: 494px>Company Name:</label>

Answer 6

最简单的就是把<input>里面<label>

<div>
  <label for="comp-name">Company Name: <input type="text" name="comp-name" />
  </label>
</div>

Answer 7

您有两个选项用于放置标签和输入。

1）您可以将标签和输入作为兄弟姐妹彼此相邻放置。

<label for="cheese">Do you like cheese?</label>
<input type="checkbox" name="cheese" id="cheese">

2）您可以将输入元素放置在标签内，使标签成为父元素，输入成为标签的子元素。

<label>Do you like cheese?
  <input type="checkbox" name="cheese">
</label>

根据 MDN ，这两种解决方案都是有效的 HTML ，但是当您选择解决方案之一时，您需要通过向idinput 元素和label 元素添加for属性来显式地将标签链接到 input 元素。
当您选择第二个选项时，您不需要这样做，因为 DOM 自动知道（由于父子关系）标签和元素彼此相关。我会考虑第二种解决方案的明显优势。

---

笔记。 使用 css，您可以获得这些解决方案中任何一个所需的样式结果，因此我不会将其用作在 1 和 2 之间进行选择的参数。