Question

我和这个人度过了这么艰难的时期;我已经绞尽脑汁几个小时了，我正准备把头发拉出来......

我有一张表格：

<div class="inforight-contact">

<form action="contact-sent.php" method="post" enctype="multipart/form-data" name="form" id="form">
<p>

<label class="input">
<span>Name</span>
<input type="text" name="Name" id="Name" class="name"/>
</label>
</p>
                  <p>
<label class="input">
<span>Email</span>
<input type="text" name="Email" id="Email" class="email" />
</label>
</p>


<p>
<label class="input">
<span>Subject</span>
<input type="text" name="Subject" id="Subject" class="subject" />
</label>
</p> 

<p>
<label for="fileField">Comments:</label>
<label for="Comments"></label>
<textarea name="Comments" id="Comments" class="comments" cols="90" rows="4"></textarea>
</p>
<p>
<input type="image" id="submit" class="submit" />
</p>
</form>

</div>

这是我的响应式CSS：

form {
margin-right: 0x;
margin-top: 20px;
        }

form label {
            display: block;
            text-align: center;
            margin-top: 0px;
            padding-bottom: 5px;
        }

form .submit {
            -webkit-appearance: none;
            border: 0px;
            background: #EA5310;
            width: 100%;
            border-radius: 0.50em;
            margin: 0em 0em;
            padding: 0.7em 1em;
            box-shadow: inset 0 0.1em 0.1em 0 rgba(0,0,0,0.05);
            -moz-transition: all 0.35s ease-in-out;
            -webkit-transition: all 0.35s ease-in-out;
            -o-transition: all 0.35s ease-in-out;
            -ms-transition: all 0.35s ease-in-out;
            transition: all 0.35s ease-in-out;
            font-family: "Roboto",sans-serif;
            font-size: 10pt;
            font-weight: lighter;
            color: #fff;
            outline: none;
            cursor: pointer;
            display: block;
            text-align: center;
            height: 20px;
        }





form input.name,
form input.email,
form input.tel,
form input.subject {
            -webkit-appearance: none;
            border: 0;
            background: #f3f4f5;
            width: 100%;
            border-radius: 0.50em;
            margin: 0em 0em;
            padding: 0.7em 1em;
            box-shadow: inset 0 0.1em 0.1em 0 rgba(0,0,0,0.05);
            -moz-transition: all 0.35s ease-in-out;
            -webkit-transition: all 0.35s ease-in-out;
            -o-transition: all 0.35s ease-in-out;
            -ms-transition: all 0.35s ease-in-out;
            transition: all 0.35s ease-in-out;
            font-family: "Roboto",sans-serif;
            font-size: 10pt;
            font-weight: lighter;
            color: #777;
            outline: none;
            text-align: center;
        }


form input.name:focus,
form input.tel:focus,
form input.email:focus,
form input.subject:focus
            {
                box-shadow: 0 0 2px 1px #E0E0E0;
                background: #fff;
            }


form textarea.comments {
            -webkit-appearance: none;
            border: 0;
            background: #f3f4f5;
            width: 100%;
            border-radius: 0.50em;
            margin: 0em 0em;
            padding: 0.7em 1em;
            box-shadow: inset 0 0.1em 0.1em 0 rgba(0,0,0,0.05);
            -moz-transition: all 0.35s ease-in-out;
            -webkit-transition: all 0.35s ease-in-out;
            -o-transition: all 0.35s ease-in-out;
            -ms-transition: all 0.35s ease-in-out;
            transition: all 0.35s ease-in-out;
            font-family: "Roboto",sans-serif;
            font-size: 10pt;
            font-weight: lighter;
            color: #777;
            outline: none;
        }


form input.comments:focus
            {
                box-shadow: 0 0 2px 1px #E0E0E0;
                background: #fff;
            }

我遇到的问题是＆＃39;提交＆＃39;按钮文字不会坐在中心。它坐着对齐：左边。如果我将桌面屏幕缩小为移动尺寸，如果我使用像screenfly或Firefox的响应式网站，但是在我的手机上它与左边对齐并且文本周围有一个白框，看起来很好。这使得识别问题变得非常困难，因为我只能在移动设备上看到问题。 Firebug应用程序列出了我的所有.css样式，并显示它应该是text-align：center，但它不是。谁能看到我能做的任何事情？如果您需要更多代码，请与我们联系。

Answer 1

替换以下代码：

<input type="image" id="submit" class="submit" />

通过

<input type="text" id="submit" class="submit" value="Submit" />

响应式表格“提交”按钮 - 移动版

1 个答案: