我知道在 React 文本输入中添加图标的问题在过去的各种问题中都有涉及(例如: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 来做到这一点。
关于css - 在 React 组件的文本输入中放置一个图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70022113/