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

Question

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

右侧的电子邮件字段高两行，输入居中。我的代码似乎没有反映这一点，那么我应该在我的网站中寻找其他地方吗？

提前致谢！瑞安

这是有问题的代码：

                                            <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

#email它与第62 行的规则相匹配style.css：

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

换句话说：元素 ID没有按应有的唯一性使用，这条规则可能适用于需要水平居中email的其他元素。padding-top

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

Answer 2

您应该使电子邮件字段左对齐，当前它居中并将填充顶部设置为 0

 #email {
    text-align: left;
    color: black;
    padding-top: 0px;
    }

Answer 3

您正在使用 padding-top 使电子邮件字段看起来更大，如果您希望文本与中间垂直对齐而不是 padding-top，我会使用高度而不是填充。

#email {
text-align: left;
color: black;
height: 100px;
}