html - 输入字段内的可点击图像 - 位置不起作用

Question

我知道这个问题之前已经被问过和回答过，但出于某种原因，答案对我不起作用；所以非常感谢任何帮助。

我正在创建一个混合移动应用程序，我需要在输入字段中添加一个可点击的图标 (SVG)。尽管我已经设法添加了图标，但当我在不同的屏幕上测试我的设计时，图标不符合我需要的位置。
这里有一些镜头:This is how it's supposed to look in all screens和 this is what it looks like in landscape mode, for example .

这是我的代码:https://codepen.io/paulamourad/pen/djXvxq

CSS:

.wallet-body {
    width: 100%;
    margin: 0 auto;
}

.form-group {
    position: relative;
}

.form-group input {
    border: 1px solid #2C2C2C;
    height: 48px;
}

.qr-scanner-img {
    float: left;
    width: 11%;
    margin-top: -39px;
    margin-left: 120px;
    position: relative;
}

HTML:

<div class="wallet-body">
   <form class="form-pagar">
      <div class="form-group">
         <input type="amount" class="form-control" id="amount" placeholder="Monto">
      </div>
      <div class="form-group">
         <input type="IDuser" class="form-control" id="IDuser" placeholder="Email del destinatario">
         <a href="#">
         <img class="qr-scanner-img" src="img/qr.svg" alt="qr"></a>
         </a>
      </div>
   </form>
</div>

Answer 1

.wallet-body {
    width: fit-content;
    margin: 0 auto;
    float: left;
}
.form-group{
    position: relative;
}
.form-group input {
    border: 1px solid #2C2C2C;
    height: 48px;
}

.qr-scanner-img {
    width: 11%;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

    <div class="wallet-body">
                <form class="form-pagar">
                  <div class="form-group">
                    <input type="amount" class="form-control" id="amount" placeholder="Monto">
                  </div>
                  <div class="form-group">
                    <input type="IDuser" class="form-control" id="IDuser" placeholder="Email del destinatario">
                        <a href="#">
                        <img class="qr-scanner-img" src="img/qr.svg" alt="qr"></a>
                    </a>
                  </div>
                </form>
            </div>