表单输入和按钮未完全对齐答案

【问题标题】：Form inputs and button do not perfectly align表单输入和按钮未完全对齐
【发布时间】：2015-08-16 00:14:57
【问题描述】：

我有一个注册表单，我想把它放在中间。但是，我的输入字段和按钮没有完全对齐。它们确实具有相同的尺寸。按钮宽了 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;
}

【问题讨论】：

标签： html css forms button alignment

【解决方案1】：

br 似乎是造成错位的原因。在检查器中删除它们正确对齐输入。给你的输入边距：10px auto 0;而不是 margin-top: 10px; 此外，您的输入似乎是 box-sizing:border-box;通过它的行为，输入似乎是内容框。将提交的大小调整为 229px 以匹配其他输入，或者以其他方式。

【讨论】：

您好弗拉德，您的答案的某些部分似乎丢失了。你指的是一些东西，但我看不到它。谢谢你的回答。
@user2756101 解决了这个问题。显然 SO 没有逃脱 br 标签

【解决方案2】：

您只需要在包装元素 (#pjsignup_container) 处添加 width 和 margin。

代码示例

#pjsignup_container {
    width: 220px;
    margin: 0 auto;
    padding: 10px 0px 10px 0px;
}

因为

margin: 0 auto; 
/* is equal to(=) */ 
margin: 0 calc(50% - width/2);

例子

#eg {
 width: 500px;
 margin: 0 auto; /* or */ margin: 0 calc(50% - 500px/2);
}

愉快的一天。祝你好运

【讨论】：

【解决方案3】：

    <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>

这里我只使用中心标签来对齐它在中间

【讨论】：