如何让“适合-内容”带全宽？(CSS)
如何让“适合-内容”带全宽？(CSS)
提问于 2018-07-19 04:47:30
我正在设计一个混合移动应用程序，我有一个简单的表单，里面有一个可点击的图标。为了让图标始终保持在相同的位置，而不管屏幕的大小，有人建议我添加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>
回答 2
Stack Overflow用户
发布于 2018-07-19 05:11:17
如果我没理解错的话，你可以用绝对位置来表示图标。
Stack Overflow用户
发布于 2018-07-19 05:14:39
您应该为.wallet-body和.pin- 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;
}希望能行得通。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51410754
复制相关文章
相似问题