css - 为什么我的电子邮件表单字段太高，而且文本居中？

Question

据我所知，我的表单域是完全标准的。该页面位于 http://worldcastmovie.com/login.php

右边的电子邮件字段有两行高，输入居中。我的代码似乎没有反射(reflect)这一点，那么我应该查看网站中的其他地方吗？

提前致谢! 瑞安

这是有问题的代码:

                                            <div>
                                                    <label>Name:</label>
                                                    <input type='text' name='name'/>
                                            </div>
                                            <div>
                                                    <label>Email:</label>
                                                    <input type='text' name='email' id = 'email'/>
                                                    <div class='error'>
                                                            Please enter your email.
                                                    </div>
                                            </div>
                                            <div>
                                                    <label>City:</label>
                                                    <input type='text' name='city'/>
                                            </div>


                                            <div style='position:relative'>
                                                    <label>Desired Username:</label>
                                                    <input type='text' name='username' id='username'/>
                                                    <div class='error'>
                                                            Please choose different username.
                                                    </div>
                                            </div>
                                            <div>
                                                    <label>Desired Password:</label>
                                                    <input class='input' type='password' name='password' id='password'/>
                                                    <div class='error'>
                                                            Please specify different password.
                                                    </div>
                                            </div>
                                            <div>
                                                    <label>Confirm Password:</label>
                                                    <input class='input' type='password' name='cpassword' id='cpassword'/>
                                                    <div class='error'>
                                                            Please confirm your password.
                                                    </div>
                                            </div>
                                            <!--<div>
                                                    <label>Video:</label>
                                                    <input type='file' name='video' />
                                            </div>
                                            <div>

                                                    <input type='checkbox' name='terms' style='margin-left:12px;margin-top:20px;' id='terms' /><span style='margin-left:10px;'>I have read and agree to the <a href='terms.php'>terms and conditions</a></span>
                                                    <div class='error'>
                                                            You have to read and agree to the terms and conditions.
                                                    </div>
                                            </div>-->

                                            <input type='image' src='/images/register.png' id='submit'/>
                                    </form>

Answer 1

它匹配 style.css 第 62 行 #email 上的规则:

#email {
text-align: center;
color: black;
padding-top: 30px;
}

换句话说:元素 ID email 没有按应有的方式唯一使用，这条规则可能适用于其他一些需要 padding-top 和 horizo​​ntal 的元素居中。

一个简单的右键单击和“检查元素”也会向您展示这一点。