0

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

看起来这是特定于浏览器的：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。

我知道我以前见过这个问题，但我只是扯头发，找不到解决办法！

4

1 回答 1

0

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

当右元素放置在 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 人将有完美的理由说明这种行为是正确的......

于 2013-10-26T17:08:55.563 回答