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

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

我正在共享一支带有可能解决方案的笔：

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

点击查看代码笔的解决方案

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 自动; 我猜你想把表格保持在屏幕中间吗？如果是，那么这将起作用。