1

这是我页面上的表单代码：

<form id="form2" action="processRegister.php" method="post" onsubmit="return checkRegister()">
                        <h4>Register</h4>
                        <div class="reminder">Already registered? Sign in below.</div>
                        <div id="sMessage"></div>
                        <div class="field"><label>First Name:</label><input class="input" type="text" name="firstName" /></div>
                        <div class="field"><label>Last Name:</label><input class="input" type="text" name="lastName" /></div>
                        <div class="field"><label>Email (.edu):</label><input class="input" type="text" name="email" /></div>
                        <div class="field"><label>Password:</label><input class="input" type="password" name="password" /></div>
                        <div class="field"><label>Confirm Password:</label><input class="input" type="password" name="cPassword" /></div>
                        <div class="field"><input class="submit" type="submit" value="Register"/></div>
                    </form>

这是相关的CSS：

 .submit
{
    background-color:#30BEB4;
    margin:0 auto;
    display:block;
    border: 1px solid #000000
}

这会将提交按钮置于 FF 中而不是 Chrome 中。我怎样才能解决这个问题？

4

6 回答 6

1

尝试

HTML： 

<div class="submit-container field">
<input class="submit" type="submit" value="Register"/>
</div>

CSS： 

.submit
{
    background-color:#30BEB4;
    border: 1px solid #000000
}

.submit-container {
    text-align: center;
}
​
于 2012-06-01T20:02:18.800 回答
1

你可以用

margin:0 45%;
width:10%;
于 2012-06-01T20:05:41.993 回答
1

尝试设置按钮的宽度：http: //jsfiddle.net/hg7KV/1/

.submit
{
    width: 100px;
    background-color:#30BEB4;
    margin:0 auto;
    display:block;
    border: 1px solid #000000;  
}​
于 2012-06-01T20:05:50.853 回答
1

要么给提交按钮一个宽度，要么将父 div 设置为 text-align:center 并删除提交按钮上的 display:block。

jsFiddle 示例（按钮有宽度）

jsFiddle 示例（父级具有文本对齐中心）

text-align 属性仅影响内联元素，因此您需要从输入元素中删除 display:block 。margin:0 自动居中技巧仅适用于具有宽度的元素。

于 2012-06-01T20:07:19.357 回答
1

您必须将宽度添加到您的提交类：

.submit
{
  background-color:#30BEB4;
  margin:0 auto;
  display:block;
  border: 1px solid #000000
  width: 60px;
}

http://jsfiddle.net/PPDLC/2/

于 2012-06-01T20:08:46.363 回答
1

如果您只向您的 .submit 类添加一个宽度属性，它就可以工作。例如添加“宽度：100px；”。可能 Chrome 需要尺寸来定位其元素，而 Firefox 无论如何都会这样做。

于 2012-06-01T20:10:34.840 回答