每次选择输入字段时，如何防止移动网站上的表单在横向视图中浮动？

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欲望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>

Answer 2

使用这样的表单属性：

form { border: 10px solid #D3D3D3; border-radius: 4px; background: #D3D3D3; width: 176px; height: 319px; position: relative; margin: 0 auto; font-family: "Arial", "Times New Roman", "Sans Serif"; font-style: normal; text-decoration: none; }

我已经移除你的浮动并使位置相对并增加了保证金：0 auto;我猜你试图将表格保留在屏幕中间？如果是，那么这将有效。