Question

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

请详细说明为什么会发生这种情况，请随时发布更正！

以下是JSfiddle的链接：

https://jsfiddle.net/Shadowcode/pbp4y9tu/

<!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>

谢谢！

Answer 1

不确定为什么我的其他评论没有显示。但是我将登录按钮的位置更改为绝对按钮，它解决了问题。变化反映在小提琴中。谢谢大家！

Answer 2

答案是因为浮动或绝对定位元素被认为是流动元素之外（意味着它们不影响父div（如果不是块元素），因为它们被解释为由于浮动或绝对而不在其流动中位置）。在这种情况下，#login-container包含具有浮动右属性的登录按钮，因此按钮而不是限制在登录容器div中，谁将左绝对colomn和表单元素作为其空间，并且其边距为auto它保持在它所在的位置并影响其他元素。

解决方案：有许多解决方案可以强制浮动元素限制它以尊重它的父容器尺寸。

在父元素上使用overflow:hidden;（在本例中为＃login-container）。溢出：隐藏实际上要求浏览器强制子元素保持在容器内并且不会离开它。
在浮动元素或流出元素之后使用带有clear：both属性的in flow元素（div或span），以使父元素从顶部到end元素的结尾。清除：两个属性都指示元素框的哪些边可能不与较早的浮动框相邻。（为了使这个语义你也可以使用伪元素：after使用clear：both;在float元素上）。
在父级上使用块级强制显示如display：table也会使浮动的子级符合其父级的维度。

您可以使用任何这些解决方案来解决此问题，但请注意，这不是错误。在使用html和css时，它只是缺乏对元素工作流程的了解。

希望这能解释问题，并为所有需要帮助的人提供解决方案。

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

2 个答案: