Html 如何将标签放置在文本框输入上？

我有下面的代码来制作一个登录表单，但我不能让复选框标签像总是靠在文本区域的边缘。我总是坐在文本区的右边。我不能让它依赖于它所在的部门。检查时，它位于舱外

我尝试过的不同方法包括给标签一个左值，但当屏幕大小改变时，这会把它弄糟

我想要这样的东西

函数showHidePassword（）{
var x=document.getElementById（“pass”）；
如果（x.type==“密码”）{
x、 type=“text”；
}否则{
x、 type=“密码”；
}
}

正文{
背景色：#ffffff；
}
* {
框大小：边框框；
}
输入[类型=文本]，
选择，
文本区{
宽度：100%；
填充：12px；
边框：1px实心#ccc；
边界半径：4px；
调整大小：垂直；
}
输入[类型=密码]，
选择，
文本区{
宽度：100%；
填充：12px；
边框：1px实心#ccc；
边界半径：4px；
调整大小：垂直；
}
标签{
填充：12px 12px 12px 0；
显示：内联块；
}
输入[类型=提交]{
背景色：#4CAF50；
颜色：白色；
填充：12px 20px；
边界：无；
边界半径：4px；
光标：指针；
浮动：对；
}
输入[类型=提交]：悬停{
背景色：#45a049；
}
.集装箱1{
边界半径：25px；
背景色：#F2F2；
填充：40px；
位置：中心；
利润率：15%30%；
}
.注册{
边界半径：25px；
背景色：#F2F2；
填充：40px；
位置：中心；
不透明度：0.96；
}
.集装箱1.新车身{
背景#f2f2；
}
.注册，新机构{
背景#f2f2；
}
.注册，排{
垫面：5px；
}
上校25{
浮动：左；
宽度：25%；
边缘顶部：6px；
}
上校75{
浮动：左；
宽度：65%；
边缘顶部：6px；
}
/*清除列后的浮动*/
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
/*响应式布局-当屏幕宽度小于600px时，使两列堆叠在一起，而不是相邻*/
@媒体屏幕和屏幕（最大宽度：600px）{
col-25先生，
col-75，
输入[类型=提交]{
宽度：100%；
边际上限：0；
}
col-70，
输入[类型=提交]{
宽度：95%；
边际上限：0；
}
}
passw先生{
光标：指针；
宽度：30px；
高度：20px；
}
.col-75标签{
填充顶部：16px；
位置：绝对位置；
z指数：100；
}

密码

如果要确保复选框显示在文本输入中。您可以使用

相对

类包装两个输入字段，然后对复选框应用

绝对

定位

像这样：

需要注意的事项：

---

我建议在文本输入中添加一些

右键填充

，以确保其文本不会与

绝对

定位复选框重叠/位于下方。

如果要确保复选框显示在文本输入中。您可以使用

相对

类包装两个输入字段，然后对复选框应用

绝对

定位

像这样：

需要注意的事项：

---

我建议在文本输入中添加一些

右键填充

，以确保其文本不会与

绝对

定位复选框重叠/位于下方。

根据您的代码，在css中添加以下规则

• float:right

  到

  .col-75

  而不是float left

• 右侧：0

  至

  .col-75标签

---

这些将确保复选框保留在输入字段中。

根据您的代码，在css中添加以下规则

• float:right

  到

  .col-75

  而不是float left

• 右侧：0

  至

  .col-75标签

---

这些将确保复选框将保留在输入字段中。

为什么不设置

占位符

属性？会有同样的结果你是什么意思@JapreScott在“input”元素上使用

placcholder

属性时，您会获得非常相似的视觉体验。但是，由于我不明白你为什么想要达到这种效果，我的答案可能是错误的/误导性的，请参见下面的公认答案。Danjones_mcr为我找到了解决方案为什么不直接设置

占位符

属性？会有同样的结果你是什么意思@JapreScott在“input”元素上使用

placcholder

属性时，您会获得非常相似的视觉体验。但是，由于我不明白你为什么想要达到这种效果，我的答案可能是错误的/误导性的，请参见下面的公认答案。Danjones_mcr帮我找到了解决方案谢谢！那真的很有帮助！非常感谢。那真的很有帮助！

.wrapper {
  position: relative;
}

.text {
  width: 100%;
  height: 100%;
}

.checkbox {
  position: absolute;
  top: -8px;
  right: -8px;
}