我正在设计一个混合移动应用程序,我有一个简单的表单,里面有一个可点击的图标。为了让图标始终保持在相同的位置,而不管屏幕的大小,有人建议我添加width: fit-content
属性。这使得图标停留在它应该停留的地方。但是,现在我的表单不再采用100%的宽度。如果我将width: fit-content
更改为width: 100%
,那么图标将失去它的spot。
这就是我需要的样子:
我管理这个宽度,这是它现在的样子:,width: 100%
,is,this,is,This,is,现在的样子:
这是它在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>
https://stackoverflow.com/questions/51410754
复制相似问题