Html 元素相对于文本输入的位置

我面临以下挑战。当用户在输入字段中键入内容时，我想显示一个复位按钮，其位置位于输入的右中央

我无法更改标签、输入、按钮和错误消息的html结构。我不想使用浏览器支持。有人有创意怎么做吗？提前谢谢

标签{
显示：块；
}
.btn{
填充：10px；
背景颜色：绿色；
颜色：#fff；
}
输入{
填充：10px；
}

息票
错误消息
x

大纲

用

包装您想要保持现状的任何东西。这将创建一个定位上下文，您可以在其中定位任何内容。然后用

position:absolute

和所需的偏移量将重置按钮定位在您创建的包装内部和相对位置

这是一个尝试，但我不确定我是否理解你的情景

标签{
显示：块；
}
.btn{
填充：10px；
背景颜色：绿色；
颜色：#fff；
}
输入{
填充：10px；
}
.输入包装器{
位置：相对位置；
显示：内联块；
}
.重置{
位置：绝对位置；
右：3px；
顶部：7px；
}

息票
错误消息

大纲

用

包装您想要保持现状的任何东西。这将创建一个定位上下文，您可以在其中定位任何内容。然后用

position:absolute

和所需的偏移量将重置按钮定位在您创建的包装内部和相对位置

这是一个尝试，但我不确定我是否理解你的情景

标签{
显示：块；
}
.btn{
填充：10px；
背景颜色：绿色；
颜色：#fff；
}
输入{
填充：10px；
}
.输入包装器{
位置：相对位置；
显示：内联块；
}
.重置{
位置：绝对位置；
右：3px；
顶部：7px；
}

息票
错误消息

。表单组{
位置：相对位置；
}
标签{
显示：块；
}
.btn{
填充：10px；
背景颜色：绿色；
颜色：#fff；
}
输入{
填充：10px；
}
.重置{
左边距：-20px；
边缘顶部：10px；
位置：绝对位置；
}

息票
错误消息

。表单组{
位置：相对位置；
}
标签{
显示：块；
}
.btn{
填充：10px；
背景颜色：绿色；
颜色：#fff；
}
输入{
填充：10px；
}
.重置{
左边距：-20px；
边缘顶部：10px；
位置：绝对位置；
}

息票
错误消息

事实上，我已经知道我无法用

位置：绝对值解决这个问题，因为您必须处理标签，可能还有错误消息。所以说实话，我什么都没有，因为我没有我的解决方案。和

en

before

之后的

伪元素对输入不起作用。@NiZa我添加了一个带有通用策略的答案，但如果您能更好地解释您希望重置按钮的位置（什么的右中？内部/外部？）.@AlinPurcaru对齐应该垂直于输入字段。@NiZa只是为了确保我理解正确。你能改变你的HTML标记吗？还是只需要使用CSS？html顺序需要是
标签
，然后是
输入
。实际上，我已经知道我不能用
position:absolute
解决这个问题，因为你必须处理标签，可能还有错误消息。所以说实话，我什么都没有，因为我没有我的解决方案。和

en

before

之后的

伪元素对输入不起作用。@NiZa我添加了一个带有通用策略的答案，但如果您能更好地解释您希望重置按钮的位置（什么的右中？内部/外部？）.@AlinPurcaru对齐应该垂直于输入字段。@NiZa只是为了确保我理解正确。你能改变你的HTML标记吗？还是只需要使用CSS？html顺序需要是
标签
，然后是
输入
。中间没有任何html。请参阅我对该问题的最后评论。html顺序需要添加标签，然后输入。中间没有任何html。请参阅我对该问题的最后评论。html顺序需要添加标签，然后输入。中间没有任何html。