如何使“适配内容”达到全宽度?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (39)

我正在设计一个混合移动应用程序,我有一个简单的表单,里面有一个可点击的图标。为了使图标始终保持在同一个地方,无论屏幕尺寸如何,有人建议我添加该属性width: fit-content。这使得图标保持原样。但是,现在我的表单不再采用100%宽度了。如果我换width: fit-contentwidth: 100%,那么图标会失去它的位置。

这就是我需要的样子。(https://i.stack.imgur.com/eHNiD.png)我管理这个宽度width: 100% 这就是它现在的样子。(https://i.stack.imgur.com/HRMCK.png)这就是它的样子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>

提问于
用户回答回答于

你应该加上width:100%用于.wallet-body和.pin-input

.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;
}

希望会起作用的。

用户回答回答于

如果我理解正确的话,你可以使用图标的绝对位置。

所属标签

可能回答问题的人

  • 学生

    3 粉丝476 提问7 回答
  • uncle_light

    5 粉丝518 提问6 回答
  • 最爱开车啦

    8 粉丝503 提问5 回答
  • 骑牛看晨曦

    4 粉丝522 提问5 回答

扫码关注云+社区

领取腾讯云代金券