时间戳

首页 > 解决方案 > Chrome 不尊重 display: inline on flexbox children

css - Chrome 不尊重 display: inline on flexbox children

问题描述

display: inline !important;当应用于其子元素时，如何强制 Chrome 尊重flexbox 父级？无论我将属性设置为什么， Chrome都会强制显示元素。︎</p> blockdisplay

XML

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

CSS

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

标签： cssgoogle-chromeblink

解决方案

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 */
}

推荐阅读