gpt4 book ai didi

jquery - 表单输入字段没有相同的间距

转载 作者:行者123 更新时间:2023-11-28 10:05:55 24 4
gpt4 key购买 nike

我对以下内容感到非常困惑。在我的网站中,我包含了一个简单的注册表,其中包含 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; &nbsp;

在 fieldContainers 内的几个地方。

问题似乎是您的 .fieldContainer div 中有一些额外的间距。通过像这样的 HTML 整洁处理器运行您的 HTML one

关于jquery - 表单输入字段没有相同的间距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24562341/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com