Div搞乱表单输入字段间距/高度

时间:2014-03-13 21:58:40

标签: css forms html styling

我有以下问题:

enter image description here

正如您在上图所示,由于某种原因,2个输入字段的间距与其他字段相比有所不同。我搜索了一个多小时,删除了几乎所有的造型,但我无法找出究竟是什么导致了这一点。

虽然我发现哪个DIV导致了这个问题。对于表单,我使用带有css样式错误消息的jquery验证器,为每个输入字段使用字段容器,并为每个输入字段添加标签(容器为postion / style EACH标签)。

代码如下: 表单HTML:

<div class="signup_form">

   <form class="registratie_form" id = "register-form" action="register.php" method="post" novalidate="novalidate" >

                        <div class="fieldContainer">
                                <label for="voornaam"></label>    
                                <input type="text" id="voornaam" name="voornaam" required size='50' placeholder="Jouw voornaam" maxlenght='50' pattern="[A-Za-z]{2,}">
                            </div>


                        <div class="fieldContainer">
                                <label for="achternaam"></label>
                                <input type="text" id="achternaam" name="achternaam" required size='50' placeholder="Jouw achternaam" maxlenght='50' pattern="[A-Za-z]{4,}">
                             </div>


                        <div class="fieldContainer">
                                <label for="email"></label>
                                <input type="email" id="email" name="email" required size='50' maxlenght='50' placeholder="Jouw e-mail adres">
                            </div>


                        <div class="fieldContainer">
                                    <label for="emailvalidation"></label>
                                    <input type="email" id="emailvalidation" name="emailvalidation" required size='50' maxlenght='50' placeholder="Bevestig jouw e-mail adres">
                            </div>


                        <div class="fieldContainer">
                                <label for="wachtwoord"></label>
                                <input type="password" id="wachtwoord" name="wachtwoord" required size='50' maxlenght='50' placeholder="Voer een wachtwoord in" pattern=".{4,}">
                            </div>                  
                               
                                <input type="submit" value="Register" class="submit">
                                               
           
</div>
           
</form>

抱歉荷兰文;) CSS如下:

.fieldContainer {
    position: relative;
    margin: -5px;
}
label.error {
    position: absolute;
    right: 143px;
    top: -25px;
    border: solid 1px #000;
    background: #fff;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, .7);
    padding: 2px 5px;
}

.signup_form {position: relative; top: 40px; left:-75px; }

正如您在图片中所注意到的那样,它也只是在电子邮件和电子邮件验证的输入字段中。任何人都知道导致问题的原因是什么?

0 个答案:

没有答案