Html 更改字段值时，CSS边距设置将被删除_Html_Css

Html 更改字段值时，CSS边距设置将被删除

html css

Html 更改字段值时，CSS边距设置将被删除,html,css,Html,Css,每次在一个或两个字段中输入输入，然后通过制表符切换到下一个字段时，输入字段的边距设置将被完全删除，并且字段将向左移动请阐明为什么会发生这种情况，并请随时发布更正以下是指向JSFIDLE的链接：护送的唯一方式登录电子邮件密码需要账户吗谢谢大家! 不知道为什么我的其他评论没有显示出来。但我将登录按钮的位置改为绝对，解决了这个问题。变化反映在小提琴上。谢谢大家! 不知道为什么我的其他评论没有显示出来。但我将登录按钮的位置改为绝对，解决了这个问题。变化反映在小提琴上。谢谢大

每次在一个或两个字段中输入输入，然后通过制表符切换到下一个字段时，输入字段的边距设置将被完全删除，并且字段将向左移动

请阐明为什么会发生这种情况，并请随时发布更正

以下是指向JSFIDLE的链接：


护送的唯一方式
登录
电子邮件
密码
需要账户吗

谢谢大家!

不知道为什么我的其他评论没有显示出来。但我将登录按钮的位置改为绝对，解决了这个问题。变化反映在小提琴上。谢谢大家!

答案是因为浮动或绝对定位元素被视为流出元素（意味着它们不会影响父div（如果不是块ekement），因为它们被解释为由于浮动或绝对位置而流出）。在这种情况下，

#login container

包含login按钮，该按钮具有float right属性，因此该按钮不局限于login container div，而是将who left绝对列和form元素作为其空间，并且由于其边距是自动的，因此它保持在原来的位置，并影响其他元素

解决方案：有许多解决方案可以强制浮动元素限制其父容器维度

使用

溢出：隐藏（在本例中为#登录容器）。溢出：隐藏实际上要求浏览器强制子元素保持在容器内，而不是离开容器


在浮动或出流元素之后使用带有clear:tware属性的入流元素（div或span），以使父元素从该入流元素的顶部到末端进行包裹。clear:both属性表示元素框的哪一侧可能不与先前的浮动框相邻。（要实现这种语义，还可以在float元素上使用伪元素of:after来使用clear:both；）
在父对象上使用块级别强制显示（如display:table）也将使浮动的子对象符合其父对象的维度
您可以使用这些解决方案中的任何一种来修复此问题，但请注意，这不是一个bug。在使用html和css时，它只是缺少对元素工作流的了解
希望这能解释问题并帮助所有需要它的人解决问题。
答案是因为浮动或绝对定位元素被视为流出元素（意味着它们不会影响父div（如果不是块ekement），因为它们被解释为由于浮动或绝对位置而流出）。在这种情况下，#login container
包含login按钮，该按钮具有float right属性，因此该按钮不局限于login container div，而是将who left绝对列和form元素作为其空间，并且由于其边距是自动的，因此它保持在原来的位置，并影响其他元素
解决方案：有许多解决方案可以强制浮动元素限制其父容器维度
使用溢出：隐藏（在本例中为#登录容器）。溢出：隐藏实际上要求浏览器强制子元素保持在容器内，而不是离开容器

在浮动或出流元素之后使用带有clear:tware属性的入流元素（div或span），以使父元素从该入流元素的顶部到末端进行包裹。clear:both属性表示元素框的哪一侧可能不与先前的浮动框相邻。（要实现这种语义，还可以在float元素上使用伪元素of:after来使用clear:both；）
在父对象上使用块级别强制显示（如display:table）也将使浮动的子对象符合其父对象的维度
您可以使用这些解决方案中的任何一种来修复此问题，但请注意，这不是一个bug。在使用html和css时，它只是缺少对元素工作流的了解
希望这能解释问题并帮助所有需要它的人解决问题。
当我尝试itI时，没有发生这种情况。我可以通过在“忘记密码”链接上单击两次来复制它。我去检查它，重新运行小提琴，再也不能复制这个问题了，但我不知道该怎么解释。只有当屏幕大小超过1100px时才会出现这种情况，而大多数人在默认情况下在JSFIDLE中看不到这种情况。我也无法在IE11或firefox中重现这种情况。大家好，问题似乎是间歇性出现的。我还尝试将每个输入项包装在一个容器中，这似乎也解决了问题。当我尝试itI时，没有发生这种情况。我能够通过两次切换到“忘记密码”链接来复制它。我去检查它，重新运行小提琴，再也不能复制这个问题了，但我不知道该怎么解释。只有当屏幕大小超过1100px时才会出现这种情况，而大多数人在默认情况下在JSFIDLE中看不到这种情况。我也无法在IE11或firefox中重现这种情况。大家好，问题似乎是间歇性出现的。我还尝试将每个输入项包装在一个容器中，这似乎也解决了问题。
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="login.css">
</head>
<body>
<script src="login.js"></script>

<div id="left-column">
<a id="homepage-link" href="homepage.html"><img id="logo" src="logo.png" alt=" Logo" height=150px width=150px></a>
<p id="slogan">The Only Way to Escort</p>

<h2 id="login-title">Login</h2>

<form id="login-form" method="post" action="actionpage.php" autocomplete="on">

<label class="field-label" for="email">Email</label>
<input class="input-field" type=email name="email" required="required" autofocus="on">


<label class="field-label" for="password">Password</label>
<input class="input-field" type="password" name="password" required="required">
<a id="password-recovery-link" href="password-recovery.html">Forgot password?</a>

<div id="login-container"><input id="login-button" type="submit" value="Login"></div>
</form>

<p id="account">Need an account?</p>
<a id="signup-link" href="signup.html"><button id="signup-button" type="button">Sign up</button></a>

<ul id="link-list">
<li class="link-item"><a href="conditions.html">Conditions</a></li>
<li class="link-item"><a href="privacy.html">Privacy</a></li>
</ul>
</div>

<div id="billboard"></div>
</body>
</html>