html - 每次单击输入字段时，如何在纵向视图中停止我的移动网站上的 html 表单从浮动到横向视图？

Question

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

这是我在桌面平台上的 html 表单的当前 css 代码：

form 
{
border: 10px solid #D3D3D3;
border-radius: 4px;
background: #D3D3D3;
width: 174px;
height: 306px;
position: absolute;
top: 212px;
left: 1168px;
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;
}
textarea
{
resize: none;
box-sizing: border-box;
position: relative;
top: -23px;
left: 01px;
width: 173px;
}

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

这是我在移动设备上的 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>

This is the css for the html form on my mobile website:

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，我正在设计我的移动网站时考虑到这一点。

标签： htmlcssformsmobilemedia-queries