参见图片以供参考

我想知道是否可以修复输入字段末尾的文本。我正在做一个货币转换器，用户必须输入欧元的值（例如），另一个输入应该返回美元的值，并且在输入的末尾必须有货币的名称。我只对输入中固定文本的HTML部分感兴趣。我正在使用React和Chakra UI.

顺晟科技：

的做法是在输入后添加文本，添加一个position: relative;在要包含在输入中的文本上，然后使用left或right。运行代码片段，看看它是否是您想要的。

<代码>DIV{显示：Flex；}P{位置：相对；左：-50px；}

<代码><；！文档类型HTML>；<；HTML（>；）<；头部>；<；元字符集=“ UTF-8 ”>；<；meta name=“ viewport ” content=“ width=device-width ”>；<；链接href=“ style.CSS ” rel=“ stylesheet ” type=“ text/CSS ”/>；<；/标题>；<；身体>；<；细分（>；）<；INPUT PLACEHOLDER=“ PLACEHOLDER ”>；<；P>；TEXT<；/P>；<；/DIV>；<；/正文>；<；/HTML>；

如果您将输入包装在另一个元素中，标签似乎是合适的，那么您可以向其添加一个伪元素，并使用转换来定位内容。

在这个片段中，一个小的额外量被添加到翻译中，以产生一点填充的效果，所以美元不会正好对着输入的末尾。

<代码>标签：之后{内容：'美元'；显示：inline-block；转换：translateX（计算（-100%-5px））；}

<代码><；标签>；<；输入/>；<；/标签>；