Html 向右浮动导致垂直移动2px

我正在设计一个登录模式窗口。我对“忘记密码”链接的垂直对齐有问题

我在同一行中使用以下代码进行左对齐（表示“记住我”）和右对齐（表示“忘记密码？”）

记得我吗

它与垂直对齐有关。仅应用于内联级别和表格单元格元素-块级别元素不在此组中。

垂直对齐

的默认值是

基线

，顾名思义，它将内联元素的所有内容与基线对齐。
现在，当您向右或向左浮动元素时，浏览器会自动将其显示属性更改为

display:block

（无法覆盖此属性）。因此，浮动元素内容的垂直对齐也会发生变化-

vertical align

对这些元素没有任何意义。我创作了小提琴来展示。
这就解释了为什么您的垂直2px移动到浮动链接的顶部，这将简单地与其父链接的顶部边缘对齐。
为了证明这一点，只需应用

垂直对齐：top到


我已经在父div容器中包含了所有css内联，所以您需要将其移动到外部文件，但您有一个想法。

因此，忘记浮动，删除清除浮动的div，也许开始使用flexbox。

现在已经相当不错了，而且一些tweener语法甚至涵盖了IE10

希望这是有意义的。
为什么不为其他元素设置“显示无”？我不想隐藏任何内容。我想对问题中提到的左右对齐使用浮动。但是，在使用
float:right
时，“忘记密码”链接向上移动2倍。另一个结构仅用于比较“忘记密码”链接的垂直对齐方式。在ff/ie/chrome上，两个代码链接都没有显示任何重叠。课文是分开的。@IlpoOksanen我想你没有明白这个问题。第一个代码链接没有显示重叠，这是正确的（预期行为）。在第二个代码链接中，单击“打开模式”。在这里，您将看到模态中“忘记密码”链接的不正确重叠（意外行为）。感谢您的努力。但是，相同的结构在处于模态外部时工作得非常好（检查第一个jsbin）。你如何证明这一点？这里有一个完美的重叠，没有任何2px的偏移。
<div style="margin-top: -19px; display: flex;justify-content: space-between;align-items: baseline;">
     <span>
       <input type="checkbox" style="margin-left:0;vertical-align:-1px;"><label>Remember me</label>
     </span>
     <a href="password_retrieve.php">Forgot password?</a>
</div>