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>

输入栏内的可点击图片-位置不起作用

1 个答案: