我对以下内容感到非常困惑。在我的网站中，我包含了一个简单的注册表，其中包含 5 个输入字段(类型文本、输入和电子邮件)。虽然出于某种原因，5 个输入字段都有不同的间距，但至少输入类型电子邮件和密码具有相同的间距，但类型文本具有不同的间距(见图)。
所以您首先想到的是:将所有字段更改为相同类型，例如文本类型。所以我做了，但我仍然遇到同样的问题。我想到的第二件事是，重置所有(浏览器)CSS/样式。所以我包括了一个样式重置，但这也没有任何效果。所以现在我被困在这个问题上了。我试图通过为每个输入字段提供具有不同上边距的不同类来修复它，以便它们(几乎 - 基于我的观点)具有相同的间距。这个解决方案的问题是，当表单不正确(这是一个基于标签的弹出窗口)时，我也有一条错误消息(比如提交的电子邮件不正确)，但是，错误消息连接到标签(编程在jQuery)，所以这会导致错误消息的位置错误(它们不完全在输入字段后面) - 参见图像。
问题图片链接(因为我还不能上传图片):http://s18.postimg.org/f8ct2f789/Problem1.png
HTML 如下:
<body>
<div id="wrapper">
<div id="header">
<div id="logo_wrapper">
<span class="logonaam1">O</span><span class="logonaam2">b</span><span class="logonaam1">l</span><span class="logonaam2">e</span><span class="logonaam1">c</span><span class="logonaam2">t</span><span class="logonaam1">a</span><span class="logonaam2">r</span><span class="logonaam1">e</span>
</div>
<form action="login.php" method="post">
<div id="aanmeldform_submit">
<input type="submit" name = "submit_login" value="Aanmelden" id="submit_knop" />
</div>
<div id="aanmeldform_wachtwoord">
<input type="password" name ="password" value="" id="aanmeld_knop" required placeholder="Voer je wachtwoord in" />
</div>
<div id="aanmeldform_email">
<input type="email" name="email" value="" id="aanmeld_knop" required placeholder="Voer je e-mail in" autofocus/>
</div>
</form>
</div>
<div id="register_wrapper">
<div class="Regi">Registreren</div>
<form class="registratie_form" id = "register-form" action="register.php" method="post" novalidate="novalidate" >
<div class="fieldContainer">
<label for="voornaam"></label>
<input type="text" name="voornaam" id="voornaam" class="allInputs" required placeholder="Jouw voornaam" pattern="[A-Za-z]{2,}">
</div>
<div class="fieldContainer">
<label for="achternaam"></label>
<input type="text" name="achternaam" id="achternaam" class="allInputs" required placeholder="Jouw achternaam" pattern="[A-Za-z]{4,}">
</div>
<div class="fieldContainer">
<label for="email"></label>
<input type="text" name="email" id="email" class="allInputs" required placeholder="Jouw e-mail adres" >
</div>
<div class="fieldContainer">
<label for="emailvalidation"></label>
<input type="text" name="emailvalidation" id="emailvalidation" class="allInputs" required placeholder="Bevestig jouw e-mail adres" >
</div>
<div class="fieldContainer">
<label for="wachtwoord"></label>
<input type="text" name="wachtwoord" id="wachtwoord" class="allInputs" required placeholder="Voer jouw wachtwoord in" pattern=".{4,}" >
</div>
<div class="fieldContainer">
<input type="submit" name = "submit" value="Registreren" id="submit_knop_registreren" >
</div>
</form>
</div>
</div>
<div class="Regi2">Waren jouw vrienden hier bij? Meld je aan en kom er achter!</div>
<div class="container">
<div class="image-slider-wrapper">
<ul id="image_slider">
<li><img src="/debasis/hoofdstuk03/Icons index/Index pic 1.jpg" width="600px" height="300px"></li>
<li><img src="/debasis/hoofdstuk03/Icons index/Index pic 2.jpg" width="600px" height="300px"></li>
<li><img src="/debasis/hoofdstuk03/Icons index/Index pic 3.jpg" width="600px" height="300px"></li>
<li><img src="/debasis/hoofdstuk03/Icons index/Index pic 4.jpg" width="600px" height="300px"></li>
<li><img src="/debasis/hoofdstuk03/Icons index/Index pic 5.jpg" width="600px" height="300px"></li>
</ul>
<div class="pager">
</div>
</div>
</div>
</body>
我在这个 fiddle 中插入了我的其余代码(jquery、html 和 css):
http://jsfiddle.net/jaaG5
您还可以在这个 fiddle 中看到空间问题。
希望这里的一些聪明人知道问题，更好的是解决方案；)
提前致谢!
最佳答案
已修复此 JSFiddle
检查员显示
&npsb;
在 fieldContainers 内的几个地方。
问题似乎是您的 .fieldContainer div 中有一些额外的间距。通过像这样的 HTML 整洁处理器运行您的 HTML one
关于jquery - 表单输入字段没有相同的间距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24562341/