将标签放置在输入上，How-To？答案

【问题标题】：Positioning the label over the input, How-To?将标签放置在输入上，How-To？
【发布时间】：2011-09-21 08:30:39
【问题描述】：

我正在尝试将标签放置在输入上，但在我将它们的位置更改为 absolute（我不需要）之前，它们似乎并没有在它们上移动。

这是我的代码示例：

  <label for="username">Your Email...</label>
  <input name="username" class="field" type="text" id="username" maxlength="40" />

这是 CSS：

label {
    color:#373737;
    font-weight:bold;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:18px;
    margin-left:8px;
    margin-top:28px;
    }

这是我得到的：

现在这是我要复制的东西，出于某种奇怪的原因，它在这里有效，但不适用于我。 The demo I'm trying to duplicate with my own CSS properties

【问题讨论】：

标签： html css input label

【解决方案1】：

您链接到的演示会在<label> 标记中添加一个否定的margin-right，以将其拉到<input> 的顶部。您发布的 CSS 中没有。

【讨论】：

没关系，因为负边距是从我不关心的右侧设置的，我真正需要的是垂直放置在输入上 - 而不是垂直放置。
@Ricardo：那么您需要将负边距放在底部。因为你还没有为你添加 CSS 代码<input>，所以我看不出它们是如何相对于彼此定位的，但这里有一个显示负下边距工作的小提琴：jsfiddle.net/pauldwaite/EM7Pz/2
它的工作原理兄弟，基本上它是如此简单，我无法理解我怎么没有想到这一点。谢谢！
@Ricardo：没问题。实际上，现在我想起来了，我不确定它为什么会起作用：我认为默认情况下，后面的元素会与前面的元素重叠，而不是相反。嘿嘿——如果它有效，那就太好了。

【解决方案2】：

请参阅此相关答案：Input with Watermark (css & Jquery)。

作为该答案的附录：

您可以将placeholder 属性设置为等于您在label 中的属性，然后使用CSS 隐藏label。只需最少的工作，就能得到您想要的。

【讨论】：

也许我不完全理解答案，但似乎placeholder 不适合这项任务，因为我想获得与我链接的演示相同的结果。实际上 2 天前这是我唯一想做的事情，但现在我想在焦点和 keyup 函数上添加颜色变化，但我找不到如何使用 placeholder 来做到这一点。有什么帮助吗？
我认为你拥有它的方式比简单的标准placeholder 更糟糕。我建议遵循我的回答中的建议，或者至少使用默认的placeholder 功能。

【解决方案3】：

我认为基本上你想要做的已经存在于许多“水印”jQuery 插件中。

谷歌“jQuery Watermark”，你会得到很多版本。意味着你不需要自己玩 hmtl/css/jquery

编辑

如果你想沿着你要去的路线走，那么只需用一些 jQuery 定位标签。看看这个小提琴的例子：http://jsfiddle.net/EM7Pz/1/ 您将看到您绝对定位标签，然后使用 jQuery，您将它们的位置更改为它们需要的输入位置。这样您就可以根据需要更改它们的颜色、大小等并为您提供比水印插件更多的控制权

我还给输入一个绝对定位的样式，只是为了证明输入在哪里并不重要，标签总是会出现在里面。

【讨论】：

将<label>s 放在那里以方便访问仍然是一个好主意，但你说得对，“水印”是 OP 试图做的。对于支持它的浏览器，placeholder HTML5 属性会很好：<input placeholder="Your Email..." name="username" class="field" type="text" id="username" maxlength="40" />
是的，html5 的占位符是一个很好的呼声，完全支持时会很好！ :D 我认为 OP 应该已经为“用户名”部分添加了标签。
似乎placeholder 不适合这项任务，因为我想获得与我链接的演示相同的结果。实际上 2 天前这是我唯一想做的事情，但现在我想在焦点和 keyup 函数上添加颜色变化，但我找不到如何使用 placeholder 来做到这一点。有什么帮助吗？
出于某种奇怪的原因，它对我不起作用。当我将位置更改为绝对位置时，两个标签都在同一个位置，效果与您的演示不同，这真的很奇怪。

【解决方案4】：

获得：

label1    label2    label3
field1    field2    field3

输入 HTML：

<div id="set">
<label for="field1">field1labeltext</label>
<input id="field1"></input>
<label for="field2">field2labeltext</label>
<input id="field2"></input>
<label for="field3">field3labeltext</label>
<input id="field3"></input>
</div>`

并在.css中设置：

#set{
    position:relative;
    top: 30px;
    margin-bottom: 30px;
}
label{
    position:relative;
    display: inline-block;
    top:-30px;
    width: 0px;
}

最好的问候，
蒂姆·范·斯滕伯格，
铁卡.nl

【讨论】：