如何使“适合内容”占据整个宽度？ （CSS）

Question

我正在设计一个混合移动应用程序，我有一个简单的表单，其中包含可点击的图标。为了使图标始终保持在同一位置，而不管屏幕大小如何，有人建议我添加属性width: fit-content。这样可使图标停留在应保留的位置。但是，现在我的表单不再采用100％的宽度。如果我将width: fit-content更改为width: 100%，则图标会丢失它的位置。

这就是我需要的样子：

我管理这个宽度width: 100% 这就是现在的样子：

这就是width: fit-content

的样子

这是我的代码：

.wallet-body {
  width: fit-content;
  margin: 0 auto;
  float: left;
}

.form-group {
  position: relative;
}

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

.qr-scanner-img {
  width: 11%;
  position: absolute;
  top: 50%;
  right: 2%;
  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>
    <button type="button" class="btn btn-block btn-confirmar" data-toggle="modal" data-target="#modalConfirmation">Confirmar</button>
  </form>
</div>

Answer 1

如果我理解正确，则可以使用图标的绝对位置。

Answer 2

您应该为.wallet-body和.pin-input添加width:100%

`

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

.form-group input,
.pin-input {
  border: 1px solid #2C2C2C;
  height: 48px;
width: 100%;

}

`

HTML ::从图像中删除类并添加标签

<a href="#" class="qr-scanner-img">
    <img class="" src="img/qr.svg" alt="qr"></a>

CSS ::

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

希望可以。