css - 在 React 组件的文本输入中放置一个图标

Question

我知道在 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 将图标定位在输入的“内部”(在左侧)——但我一直无法找到解决方案。谁能看出我可能哪里出错了？

Answer 1

我认为你最终应该得到类似于:

.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 来做到这一点。