图标应正确对齐并响应

Question

我正在尝试使fontawesome图标右对齐，而同一行上的输入字段应左对齐。两个单元都应该反应灵敏，并停留在该位置。

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

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

this is what i want

Answer 1

您在这里https://jvfe7.csb.app/

我删除了w-50类，该元素使元素仅保持50％的宽度，然后从图标中删除了left: 300%。 [[input field的flex属性也被flex: none属性覆盖，然后用下面的代码控制它。

然后我添加

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

到同时包含
input field

和icon的元素。 justify-content: space-between使两个元素停留在所需的两侧。