問題
最近寫項目時候, 對 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.