fieldset 元素添加 display: flex不生效的問題

問題

最近寫項目時候, 對 fieldset 元素 添加 display: flex , 但是沒有達到預期中的效果。

在網上, stackoverflow 上都提到了這個 bug, 然後查看了官方文檔

解決方案

fieldset 中添加 一個 div 元素 用來 作爲 flex box

官文

Styling with CSSSection

There are several special styling considerations for .

fieldset 有幾個特殊的 樣式注意點:

Its display value is block by default, and it establishes a block formatting context. If the is styled with an inline-level display
value, it will behave as inline-block, otherwise it will behave as block. By default there is a 2px groove border surrounding the contents, and a small amount of default padding. The element has min-inline-size: min-content by default.

display 屬性值默認爲 block, 並創建一個 格式化上下文的塊級元素。 如果 fieldset 被 行內級別 display 屬性值修飾, 那麼 將作爲 行內塊展示。否則作爲行內快展示。fieldset 默認存在一個 2px 的邊框 和 默認的padding. 該元素有個默認的 最小的行內尺寸,其默認值爲 最小的內容尺寸。

If a is present, it is placed over the block-start border. The shrink-wraps, and also establishes a formatting context. The display value is blockified (for example, display: inline behaves as block).

如果 legend 元素存在,將會被放置在 塊的起始邊界上。

There will be an anonymous box holding the contents of the , which inherits certain properties from the . If the is styled with display: grid or display: inline-grid, then the anonymous box will be a grid formatting context. If the is styled with display: flex or display: inline-flex, then the anonymous box will be a flex formatting context. Otherwise it establishes a block formatting context.

You can feel free to style the and in any way you want to suit your page design.

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章