我知道在 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將圖示放置在輸入的“內部”（左側） - 但我一直無法找到解決方案。誰能看到我可能出錯的地方？
uj5u.com熱心網友回復：
我認為你最終應該得到類似的東西：
.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 來做到這一點。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/360127.html
下一篇：修復具有特定樣式的html表格