html - 使用 css-float 时元素的垂直对齐

Question

为什么在同一行上的三个元素在使用 float 时不会在同一高度垂直对齐？

这似乎是特定于浏览器的:布局在 Gecko (Firefox) 中被破坏，正确的元素被放置在单独的一行上，而布局在 Chromium 中很好。

HTML 标记:

<div>
    <p>
        <a class="left" href="left">left</a>
        <a class="center" href="center">center</a>
        <a class="right" href="right">right</a>
    </p>
</div>

CSS 样式:

div{width: 100%;margin: 20px 0; }
div p{width: 100%; white-space: nowrap; text-align: center;border: 1px solid blue;}
a.left{float: left;}
a.center{}
a.right{float: right;}

这是 FireFox 中的布局结果:

为方便起见:看看这个 fiddler .

我知道我以前见过这个问题，但我只是扯头发，找不到解决方案!

Answer 1

好吧，似乎有一个非常简单的解决方法，实际上对我“有效”。我将其作为问题发布，因为对于这样一个基本问题，我没有收到任何(可用的)答案。

当正确的元素放置在 html 标记中的中心元素之前时，Gecko (Firefox) 中的布局很好:

<div>
    <p>
        <a class="left" href="left">left</a>
        <a class="right" href="right">right</a>
        <a class="center" href="center">center</a>
    </p>
</div>

我不知道为什么这个逻辑适用，但我相信 Mozilla 的人会有完美的理由来解释为什么这种行为是正确的......