为什么在同一行上的三个元素在使用 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 .
我知道我以前见过这个问题,但我只是扯头发,找不到解决方案!
最佳答案
好吧,似乎有一个非常简单的解决方法,实际上对我“有效”。我将其作为问题发布,因为对于这样一个基本问题,我没有收到任何(可用的)答案。
当正确的元素放置在 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 的人会有完美的理由来解释为什么这种行为是正确的......
关于html - 使用 css-float 时元素的垂直对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19609113/