html - 每次选择输入字段时，如何防止移动网站上的表单在横向 View 中 float ？

Question

我已经尝试使用 float、overflow、clear，但我的 html 表单仍然继续向右浮动。我的预期结果是当我去填写表格时，html 表格在我的移动设备上保持纵向。

这是我的 html 表单的当前代码:

<form name = "CommentsForm" action ="Actionpage.php" onsubmit="return       
validateForm()" method="post">
<u class = "FormHeading">Send Comment</u><br>
<br>
First Name:<br>
<input type="text" name="firstname">
<br>
<div style = "position: relative; top: 4px; left: 01px;">
Last Name:<br>
<input type="text" name="lastname">
</div>
<br>
<div style = "position: relative; top: -13px; left: 1px;">
 Email:<br>
<input type="text" name="email">
</div>
<br>
<div style = "position: relative; top: -24px; left:03px;">
<label for="comment"> Comment:</label></div>
<textarea id="comment" name="comment" placeholder="Type commment              
here" style="height: 69px;">
</textarea>
<br>
<br>
<input type="submit" name ="submit" value="Send" >
</form>

这是我移动网站上 html 表单的 css:

form 
{ 
 border: 10px solid #D3D3D3; 
 border-radius: 4px;
 background: #D3D3D3;
 width: 176px;
 height: 319px;
 position: absolute;
 top: 620px; 
 left: 91px;
 font-family: "Arial", "Times New Roman", "Sans Serif"; 
 font-style: normal;
 text-decoration: none;
 float: none;
 }
.FormHeading
{
 text-decoration: underline;
 font-weight: bold;
 position: relative;
 left: 29px;
 }
 input[type=text]
 {
 width: 168px;
 float: none;
 }
 input[type=text]:focus
 {
 float: none;
 }
 textarea
 {
 resize: none;
 box-sizing: border-box;
 position: relative;
 top: -23px;
 left: 01px;
width: 173px;
float: none;
}

input[type=submit]
{
background-color: #ADD8E6;
position: relative;
top: -44px;
left: 119px;
text-align: center;
}

请注意，我有一台 HTC desire 626，我在设计我的移动网站时考虑到了这一点。

Answer 1

我正在与一个可能的解决方案共享一支笔:

您的位置是固定的，所以我使用百分比使它们变得灵活。 让我知道是否可以。

Click for Solution at codepen

form {
  padding: 10px;
  border-radius: 4px;
  background: #d3d3d3;
  width: 176px;
  transform: translateX(-50%);
  height: 319px;
  position: absolute;
  bottom: 0;
  left: 50%;
  font-family: "Arial", "Times New Roman", "Sans Serif";
  font-style: normal;
  text-decoration: none;
}
.FormHeading {
  text-decoration: underline;
  font-weight: bold;
  position: relative;
  left: 29px;
}
input[type="text"] {
  width: 168px;
  float: none;
}
input[type="text"]:focus {
  float: none;
}
textarea {
  resize: none;
  box-sizing: border-box;
  position: relative;
  top: -23px;
  left: 1px;
  width: 173px;
  float: none;
}

input[type="submit"] {
  background-color: #add8e6;
  position: relative;
  top: -44px;
  left: 119px;
  text-align: center;
}

input[type=submit]
{
background-color: #ADD8E6;
position: relative;
top: -44px;
left: 119px;
text-align: center;
}

<form name="CommentsForm" action="Actionpage.php" onsubmit="return validateForm()" method="post">
  <u class="FormHeading">Send Comment</u><br>
  <br> First Name:<br>
  <input type="text" name="firstname">
  <br>
  <div style="position: relative; top: 4px; left: 01px;">
    Last Name:<br>
    <input type="text" name="lastname">
  </div>
  <br>
  <div style="position: relative; top: -13px; left: 1px;">
    Email:<br>
    <input type="text" name="email">
  </div>
  <br>
  <div style="position: relative; top: -24px; left:03px;">
    <label for="comment"> Comment:</label></div>
  <textarea id="comment" name="comment" placeholder="Type commment here" style="height: 69px;"></textarea>
  <br>
  <br>
  <input type="submit" name="submit" value="Send">
</form>