时间戳

首页 > 解决方案 > 将 HTML 文本框放置在桌面和移动站点的固定位置的图像上

html - 将 HTML 文本框放置在桌面和移动站点的固定位置的图像上

问题描述

我正在尝试在图像（宝箱）顶部添加一个文本框，并且我希望文本框在宝箱上的石板附近的固定位置保持完整。（附图片）

在此处输入图像描述

它在桌面上看起来很完美，但在移动设备上，文本框比平板略低，如图所示。我怎样才能让它在手机上也保持在同一个位置？（附图片）在此处输入图像描述

    <img src="img/Shadow_plate2x.png" style="position:relative; width:75%;height:75%"><br>
    <input type="number" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
        type = "number"
        maxlength = "5"  id="PlayerAnswer24" align="middle"  name="PlayerAnswerx" required="required" style="background-color: transparent;
position:absolute;
top: 31%;
left: 50%; 
transform: translate(-50%, -50%);
letter-spacing: 22px; 
color:white; 
padding-left:30px; border:0px" placeholder="XXXXX"  autocomplete="off"/>

这是我拥有的代码。请帮忙。TIA。（请原谅我的菜鸟错误）

标签： htmlcss

解决方案

我不确定你到底想要什么移动视图，但这个 HTML/CSS 是一种更简单的设置方法，你应该能够更轻松地调整它：

let input = document.getElementById("PlayerAnswer24");
input.oninput = function() {
  if (this.value.length > this.maxLength) {
    this.value = this.value.slice(0, this.maxLength);
  }
}
.container {
  position: relative;
  width: 75%;
  height: 75%;
  display: flex;
  justify-content: center;
}

#chest {
  max-width: 100%
}

#PlayerAnswer24 {
  position: absolute;
  letter-spacing: 22px;
  color: white;
  padding-left: 30px;
  border: 0px;
  top: 37%;
}
<div class="container">
  <img id="chest" src="https://i.imgur.com/1McVPJe.png"><br>
  <input type="number" type="number" maxlength="5" id="PlayerAnswer24" name="PlayerAnswerx" required="required" placeholder="XXXXX" autocomplete="off" />
  <div>

推荐阅读