Flexbox 對於 Firefox 上的圖例無法正常工作

Question

我有一個帶有文本和按鈕的圖例的字段集。 我正在嘗試使用 flexbox 使按鈕右對齊，它在 Chrome 上運行良好，但在 Firefox 上運行良好。

我得到了一個最低限度的代碼來顯示問題：

 main { width: 100%; } fieldset legend { display: flex; justify-content: space-between; width: 100%; }

 <main> <fieldset> <legend> Legend text <button type="button"> Button text </button> </legend> </fieldset> </main>

我希望圖例中的兩個元素都在同一行，就像它在 Chrome 上顯示的那樣：

但是在 Firefox 我得到以下結果

Answer 1

只需將您需要的內容包裝在 div 中並在那里應用 flex

 main { width: 100%; } span { display: flex; justify-content: space-between; width: 100vw; }

 <main> <fieldset> <legend> <span> Legend text <button type="button"> Button text </button> </span> </legend> </fieldset> </main>

Answer 2

字段集元素不支持 Flexbox 。 Float 可以在這里輕松完成這項工作：

 fieldset legend { width: 100%; } fieldset legend button { float: right; }

 <fieldset> <legend> Legend text <button type="button"> Button text </button> </legend> </fieldset>