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

あなたはそれを偽造することができます

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 centerがあります）

text-alignプロパティはインライン要素にのみ影響するため、input要素から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 クラスに width 属性を追加するだけで機能します。たとえば、「幅: 100px;」を追加します。おそらくChromeは要素を配置するために寸法が必要ですが、Firefoxはとにかくそれを行います。

于 2012-06-01T20:10:34.840 に答える
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 に答える