如何在每次单击输入字段时，阻止手机网站上纵向视图中的html表单向右浮动到横向视图？

我已经尝试过使用float、overflow、clear，但我的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;
}

发送评论



名字：



姓氏：



电子邮件：



评论：




这是我的移动网站上html表单的css：
形式
{ 
边框：10px实心#D3；
边界半径：4px；
背景#d3；
宽度：176像素；
高度：319px；
位置：绝对位置；
顶部：620px；
左：91px；
字体系列：“Arial”、“Times New Roman”、“无衬线”；
字体风格：普通；
文字装饰：无；
浮动：无；
}
.表格标题
{
文字装饰：下划线；
字体大小：粗体；
位置：相对位置；
左：29px；
}
输入[类型=文本]
{
宽度：168px；
浮动：无；
}
输入[类型=文本]：焦点
{
浮动：无；
}
文本区
{
调整大小：无；
框大小：边框框；
位置：相对位置；
顶部：-23px；
左：01px；
宽度：173像素；
浮动：无；
}
输入[类型=提交]
{
背景色：#添加8e6；
位置：相对位置；
顶部：-44px；
左：119px；
文本对齐：居中；
}

---

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

表单{边框：10px实心#D3D3D3D3；边框半径：4px；背景：D3D3D3；宽度：176px；高度：319px；位置：绝对；顶部：620px；左侧：91px；字体系列：“Arial”，“Times New Roman”，“Sans Serif”；字体样式：正常；文本装饰：无；浮点：无；}我的表单的代码现在有问题，我真的需要尽快解决这个问题。这个问题无法按原样回答，因为您只提供了CSS，而不是表单的HTML。我可以猜测-例如，表单的内容比表单本身更宽，浏览器会横向滚动，以保持当前焦点中的整个输入字段可见。但您确实需要提供一个演示问题的示例。只有到那时，我们才能工作。我想为原来的帖子道歉，这篇帖子不清楚，我现在已经更新了。有人能帮我回答这个问题吗？你可以用它在多个屏幕上定位。表单有一个绝对位置，它依赖于它的第一个具有相对位置的父对象。有时脚本会影响样式。如果您可以提供完整的代码，比如表单的父级代码和js代码，我们可以提供更好的帮助。