Chrome浏览器不显示：内联在flexbox子代上

Question

在将Chrome应用于子元素时，如何强制Chrome尊重Flexbox父元素中的display: inline !important;？无论我将block属性设置为什么，Chrome浏览器 forces 元素都将显示为display。 ︎

XML

<fieldset>
<a></a>
<input />
</fieldset>

CSS

fieldset {align-items: center; display: flex;}
fieldset * {display: inline !important;}

Answer 1

可以请您尝试：

inline-block 

注意：尝试使用内联代码块而不是内联代码。

Answer 2

当父级使用display:inline属性时，

display:flex属性对子级无效。您必须使用flex-basis和flex-grow属性将子级设置为要求。

如果仍然要强制Chrome将孩子视为display: inline !important;，则可以在父justify-content: flex-start;中简单地应用div，如下所示：

fieldset {
     display: flex;
     align-items: center;
     justify-content: flex-start; /* or center */
}

Answer 3

它的错误是使用其他元素而不是像div这样的fieldset。 那么您不必使用内嵌显示或内嵌阻止