html - 表单的奇怪对齐问题

我在网页底部有一个联系表。

每当我单击表单的任何字段时，对齐都会发疯。在我的手机上不会发生这种情况，在本地运行该网站时也不会发生这种情况（即直接在PC上通过硬盘驱动器上的源代码在网络上运行）。

链接到我的网页：thisisit.coolpage.biz

用于中心对齐的CSS（可在在线教程中找到）：

form {
    margin:0 auto;
    width:459px;
    font-family: 'Bree Serif', serif;
}

textarea {
    width:439px;
    height:27px;
    background:#efefef;
    border:1px solid #dedede;
    padding:10px;
    margin-top:3px;
    font-size:0.9em;
    color:#3a3a3a;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}

P.S-请忽略页面上的内容：P

最佳答案

在一个id页面上具有相同名称的多个HTML可能会导致问题。

将CSS中的规则更改为类：

更改：

#p1{
text-align: center;
font-family: 'Bree Serif', serif;
}

至：

.p1{
text-align: center;
font-family: 'Bree Serif', serif;
}

然后在PAGE上将<p id="p1">更改为<p class="p1">。我会尽量避免在<h1>和<p>等元素上使用多个ID。否则，您的居中位置对我来说还可以。