向右浮动引起垂直移动2px

Question

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

我用以下代码表示左边(“记住我”)和右边(“忘记密码？”)同一行对齐。

​

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

​

当单独使用时，这个片段工作得很好。然而，在我的模态窗口里，“忘记密码了吗？”由于某种原因，链接垂直向上移动2px。

我试图通过插入一个类似的结构(在上面的结构之前)来找出对齐的区别，其中“忘记密码？”链接有一个margin-left值。

​

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

​

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

在模态窗口外，我得到完美的重叠。(代码)

​

​

然而，在模态内，“忘记密码？”链接并不完全重叠。(代码)

​

​

我知道我可以通过在margin-top: 2px;标记中添加一个“忘记密码？”来解决这个问题。但我想知道这种行为背后的原因。请告诉我哪里出了问题。

Answer 1

这和垂直排列有关。垂直对齐仅应用于内联级别，表单元格元素-块级元素在此组之外。

vertical-align的默认值是baseline，顾名思义，它将内联元素的所有内容对齐到基线。

现在，当您将元素向右或向左浮动时，浏览器会自动将其显示属性更改为display:block (并且无法覆盖此属性)。因此，浮动元素的内容垂直对齐，也会发生变化-- vertical-align不再对这些元素有任何意义。我制作小提琴是为了向这个在这里展示。

这解释了你的垂直2px移动到顶部的浮动链接，这将简单地对齐其父的顶部边缘。

要证明这一点，只需将vertical-align: top;应用于非浮动元素的<a>标记(通过我需要将margin-left更改为146px的方式，以防止此链接转到另一行，以再现整个行为)。

现在你有了你的“完美重叠”，但真正的问题是处理这个问题：

我建议您使用柔性盒而不是浮点数，这样您的代码就可以如下所示：

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>   

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

所以，忘记浮标，删除清除浮点数的div，也许开始使用flexbox。

浏览器对Flexbox的支持现在相当不错，它的一些tweener语法甚至涵盖了IE10。

希望这是有意义的。