Firefox中的Flexbox：项目排列不正确 [英] Flexbox in Firefox: Items are not lined up properly

问题描述

此 http://jsfiddle.net/7ra5oL77/ 应将橙色水平线与文本对齐下。
相关的项目是：

This http://jsfiddle.net/7ra5oL77/ should line up the orange dots horizontally with the text underneath. The relevant items are:

<div class="draggable ui-widget-content"></div>

和

<div class="item">60°C</div>

这适用于Chrome和Edge，但Firefox似乎不使用全宽，

This works in Chrome and Edge, but Firefox seem to not use the full width and there is a too big white space on the right side.

推荐答案

我看到的问题是，firefox正在识别你的div.lines作为flexbox内的项目，即使是位置绝对。如果你把它们拉出容器或删除它们（我没有看到他们的目的），那么你应该很好。

The issue that I see is that firefox is recognizing your div.lines as items within the flexbox even though the are position absolute. If you pull them outside of the container or delete them altogether (I don't see their purpose), then you should be fine.

这篇关于Firefox中的Flexbox：项目排列不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！