我有以下问题:
正如您在上图所示,由于某种原因,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; }
正如您在图片中所注意到的那样,它也只是在电子邮件和电子邮件验证的输入字段中。任何人都知道导致问题的原因是什么?