图标应右对齐且响应迅速

icon should be right aligned and responsive

我正在尝试让一个很棒的字体图标右对齐，而同一行上的输入字段应该左对齐。两个单位都应该反应灵敏并留在原地。

我创建了一个沙箱和一个 img，其中显示我的意思是错误的。

https://codesandbox.io/s/bold-wind-cut7z?file=/src/components/HelloWorld.vue https://cut7z.csb.app/

this is what i want

给你https://jvfe7.csb.app/

我删除了 w-50 class ，它使元素仅保持 50% 宽度，我从图标中删除了 left: 300% 。 输入字段 上的 flex 属性 也被 flex: none 属性 覆盖，然后用下面的代码控制它。

然后我添加了

display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%

到包含 输入字段 和 图标 的元素。 justify-content: space-between 使两个元素停留在你想要的两侧。