html - 表单输入和按钮没有完全对齐

Question

我有一个注册表单，我想将其居中。但是，我的输入字段和按钮并没有完全对齐。它们确实具有相同的尺寸。该按钮宽了 5px，但是我也尝试了完全相同的宽度，但问题仍然存在。有人可以向我解释为什么会这样吗？我还想知道为什么提交按钮的宽度总是更小，即使它确实具有相同的值？该网站可在 www. http://public-journalism.com/pages/sign_up.php

这是我的 html 代码:

<div id="pjsignup_container">
    <form name="signup" method="post" action='/scripts/loginscript.php'>
        Sign up
        <br>
        <input placeholder="Username" type='text' name='username' id='username'  maxlength="50" />
        <br>
        <input placeholder="Email" type='text' name='email' id='email'  maxlength="50" />
        <br>
        <input placeholder="Re-enter email" type='text' name='email' id='email'  maxlength="50" />
        <br>
        <input placeholder="Password" type='password' name='password' id='password' maxlength="50" />
        <br>
        <input placeholder="Re-enter password" type='password' name='password' id='password' maxlength="50" />
        <br>
        <input type='submit' id="public_journalism_button" name='signup' value='Sign me up!'/>
        <p>By signing up, you agree to our <a href="#">terms of use</a>, <a href="#">privacy policy</a>, <a href="#">and cookie policy</a>.</p>
    </form>
</div>

这是我的CSS代码:

#pjsignup_container {
    padding: 10px 0px 10px 0px;
}

#pjsignup_container input {
    width: 220px;
    height: 20px;
    margin-top: 10px;
    padding-left: 5px;
}

#pjsignup_container input[type=submit] {
    width: 225px;
    height: 30px;
    color: white;
    background-color: #0072C6;          
    border: 0px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
}

Answer 1

    <center>
    <div id="pjsignup_container">
        <form name="signup" method="post" action='/scripts/loginscript.php'>
            Sign up
            <br>
            <input placeholder="Username" type='text' name='username' id='username'  maxlength="50" />
            <br>
            <input placeholder="Email" type='text' name='email' id='email'  maxlength="50" />
            <br>
            <input placeholder="Re-enter email" type='text' name='email' id='email'  maxlength="50" />
            <br>
            <input placeholder="Password" type='password' name='password' id='password' maxlength="50" />
            <br>
            <input placeholder="Re-enter password" type='password' name='password' id='password' maxlength="50" />
            <br>
            <input type='submit' id="public_journalism_button" name='signup' value='Sign me up!'/>
            <p>By signing up, you agree to our <a href="#">terms of use</a>, <a href="#">privacy policy</a>, <a href="#">and cookie policy</a>.</p>
        </form>
    </div>
    </center>

这里我只用center标签来居中对齐