如何将材质网格项中的图标始终向右对齐，即使屏幕更改

问题描述

我学习了 JavaScript React，现在我有这个问题：

我有这个Codesandbox

问题我无法让下图中的图标停留在 input 的右侧

我希望它是这样的：

我尝试以各种方式使用材料 Grid，但我想我不明白如何使用包装，例如 wrap="Nowrap"。

我也试过 <Grid item style={{ position: 'absolute',bottom: 5,right: 5 }}>，但图标在 container 之外。

解决方法

尝试在包含输入和图标的标签中使用 display: flex 而不是网格。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/它可能会帮助你。

<div className="Test">
     <input className="form-control"
            placeholder="File Title"
            value={"theTitle"}
            type="text"/>
      <Avatar />
</div>

而 css 只是

.Test {
 display: flex;
}