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

Question

我正在设计登录模式窗口。我有垂直对齐问题＆＃34;忘记密码？＆＃34;链接。

我在左边使用以下代码（对于＆＃34;记住我＆＃34;）和对（在＆＃34;忘记密码？＆＃34;）对齐在同一行。

＆＃13;

＆＃13;

<div>
  <span style="float:left;">
    <input type="checkbox" style="margin-left:0;vertical-align:-1px;"/><label>Remember me</label>
  </span>
  <a href="password_retrieve.php" style="float:right;">Forgot password?</a>
  <div style="clear:both;"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

这个代码段在单独使用时效果很好。但是，在我的模态窗口中，＆＃34;忘记密码？＆＃34;由于某种原因，链接向上垂直向上移动2个像素。

我尝试通过插入类似的结构（在上述结构之前）找到对齐的差异，其中＆＃34;忘记密码？＆＃34;链接的值为margin-left。

＆＃13;

＆＃13;

<div>
  <span>
    <input type="checkbox" style="margin-left:0;vertical-align:-1px;"/><label>Remember me</label>
  </span>
  <a href="password_retrieve.php" style="margin-left:150px;">Forgot password?</a>
</div>

＆＃13;

＆＃13;

＆＃13;

我使用margin-top来完美地重叠这两个结构。

在模态窗口之外，我得到了完美的重叠。 (Code)

但是，在模态中，＆＃34;忘记密码？＆＃34;链接没有完美重叠。 (Code)

我知道我可以通过在margin-top: 2px;标记中添加a来解决此问题，以及＃34;忘记密码？＆＃34;。但我想知道这种行为背后的原因。请让我知道我哪里出错了。

Answer 1

它与垂直对齐有关。 Vertical align仅适用于内联级别和表格单元格 - 块级别元素不在此组中 vertical-align的默认值为baseline，顾名思义，它将内联元素的所有内容与基线对齐。
现在，当您向右或向左浮动元素时，浏览器会将其显示属性自动更改为display:block（并且无法覆盖此元素）。因此浮动元素的垂直对齐＆＃39;内容，也发生了变化 - vertical-align对这些内容没有任何意义。我创造了小提琴来展示this here 这解释了您的垂直2px在浮动链接上移动到顶部，它将简单地对齐到其父级的上边缘 要证明这一点，只需将vertical-align: top;应用于非浮动元素的<a>标记（按照我需要将margin-left更改为146px的方式，以防止此链接换行到另一行，重现整个行为。） 现在你有了完美的重叠＆＃34;，但真正的问题是处理这个问题：

我建议使用flexbox而不是浮点数，因此您的代码可能如下所示：

HTML：

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

我已将所有css内联包含在父div容器中，因此您需要将其移至外部文件，但您有一个想法。
所以忘记浮点数，删除清除浮点数的div，也许开始使用flexbox Browser support for Flexbox现在相当不错，甚至还有IE10的一些tweener语法。

希望这是有道理的。