我知道过去在各种问题中都涉及到在 React 文本输入中添加图标的问题（例如：https://stackoverflow.com/a/43723780/5968663 https://stackoverflow.com/a/43723780/5968663）但我找不到解决我的问题的方法：
.wrapper {
display: flex;
align-items: center;
flex-direction: row;
}
.icon {
height: 1.5rem;
width: 1.5rem;
background-color: red;
padding: 4px;
}
.input {
height: 50px;
}
<div class="wrapper">
<div class="icon"></div>
<input class="input"></input>
</div>
我创建了一个包装器并尝试使用flex将图标放置在输入的“内部”（左侧） - 但我一直无法找到解决方案。谁能看出我哪里可能出错了？
我认为你最终应该得到类似的结果：
.wrapper {
position:relative;
}
.icon {
height: 1.5rem;
width: 1.5rem;
background-color: red;
padding: 4px;
position: absolute;
box-sizing:border-box;
top:50%;
left:2px;
transform: translateY(-50%);
}
.input {
height: 50px;
box-sizing:border-box;
padding-left: 1.5rem;
}
<div class="wrapper">
<div class="icon"></div>
<input class="input"></input>
</div>
另外，你不需要 flexbox 来做到这一点。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
