【发布时间】：2014-08-25 02:05:47
【问题描述】：
我对以下内容感到非常困惑。在我的网站中，我包含了一个带有 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>
我在这个小提琴中插入了我的其余代码（jquery、html 和 css）：
http://jsfiddle.net/jaaG5
你也可以在这个小提琴中看到空间问题。
希望这里的一些聪明人知道问题，更好的解决方案；）
提前致谢！
【问题讨论】：
-
某些东西（可能是 JQuery 本身）在您的输入之间创建了大量的代码垃圾。我对 JQuery 一点也不擅长，但你的 HTML 上没有任何换行符（
标签），所以我假设这是 JQuery 的错。
标签： jquery html css forms spacing