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

您应该使电子邮件字段保持对齐，目前它居中并使填充顶部为0

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

Answer 2

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

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

Answer 3

它符合#email第62行style.css上的规则：

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

换句话说：元素ID email未按预期唯一使用，此规则可能适用于需要padding-top和水平居中的其他元素。

一个简单的右键单击和'inspect element'也会向你展示。

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

3 个答案: