Html Flex/Grid布局不适用于按钮或字段集元素
我正试图用flexbox的Html Flex/Grid布局不适用于按钮或字段集元素,html,css,safari,flexbox,css-grid,Html,Css,Safari,Flexbox,Css Grid,我正试图用flexbox的对齐内容:中心,将-标记的内部元素居中放置。但Safari并没有把它们放在中心。我可以将相同的样式应用于任何其他标记,并且它可以按预期工作(请参见-tag)。只有按钮是左对齐的 试试Firefox或Chrome,你会发现两者的区别 是否需要覆盖任何用户代理样式?或者这个问题的其他解决方案 div{ 显示器:flex; 弯曲方向:立柱; 宽度:100%; } 按钮,p{ 显示器:flex; 弯曲方向:行; 证明内容:中心; } 试验 试验 试验 试验 问题 在某些
对齐内容:中心,将
-标记的内部元素居中放置。但Safari并没有把它们放在中心。我可以将相同的样式应用于任何其他标记,并且它可以按预期工作(请参见
-tag)。只有按钮是左对齐的
试试Firefox或Chrome,你会发现两者的区别
是否需要覆盖任何用户代理样式?或者这个问题的其他解决方案
div{
显示器:flex;
弯曲方向:立柱;
宽度:100%;
}
按钮,p{
显示器:flex;
弯曲方向:行;
证明内容:中心;
}
试验
试验
试验
试验
问题
在某些浏览器中,
元素除了在块
和内联块
之间切换外,不接受对其显示
值的更改。这意味着
元素不能是flex或网格容器,也不能是
除了
元素之外,您可能会发现此约束也适用于
和
元素
有关更多详细信息,请参阅下面的错误报告
注意:尽管它们不能是flex容器,
元素可以是flex项
解决方案
有一个简单易用的跨浏览器解决此问题的方法:
将按钮的内容包装在span
中,并使span
成为flex容器。
调整后的HTML(将按钮
内容包装在span
中)
参考/错误报告
用户(Oriol Brufau):
的子项被块化,这是flexbox规范规定的。然而,
似乎建立了块格式上下文,而不是flex上下文
用户(Daniel Holbert):这就是HTML规范所要求的。几个HTML容器元素是“特殊”的,并且有效地忽略了它们在Gecko中的CSSdisplay
值[除了它是内联级还是块级]<代码>
就是其中之一<代码>
&
也是
用户(Daniel Holbert):
不能(通过浏览器)在纯CSS中实现,因此从CSS的角度来看,它们有点像一个黑盒子。这意味着
它们的反应方式不一定与a
会的
这并不特定于flexbox——例如,如果在按钮上放置overflow:scroll
,我们不会渲染滚动条,也不会将其渲染为
表格,如果您将显示:表格
退一步说,这并不是特定于
的。考虑<代码> <代码>和<代码> <代码>,也有特殊的渲染。
行为
而像
和
和
这样的旧式HTML元素不支持自定义显示值,除了
为了回答非常高层次的问题“这是吗?”
元素块级别或内联级别”,用于在周围流动其他内容
元素
另见:
问题
在某些浏览器中,
元素除了在块
和内联块
之间切换外,不接受对其显示
值的更改。这意味着
元素不能是flex或网格容器,也不能是
除了
元素之外,您可能会发现此约束也适用于
和
元素
有关更多详细信息,请参阅下面的错误报告
注意:尽管它们不能是flex容器,
元素可以是flex项
解决方案
有一个简单易用的跨浏览器解决此问题的方法:
将按钮的内容包装在span
中,并使span
成为flex容器。
调整后的HTML(将按钮
内容包装在span
中)
参考/错误报告
用户(Oriol Brufau):
的子项被块化,这是flexbox规范规定的。然而,
似乎建立了块格式上下文,而不是flex上下文
用户(Daniel Holbert):这就是HTML规范所要求的。几个HTML容器元素是“特殊”的,并且有效地忽略了它们在Gecko中的CSSdisplay
值[除了它是内联级还是块级]<代码>
就是其中之一<代码>
&
也是
用户(Daniel Holbert):
不能(通过浏览器)在纯CSS中实现,因此从CSS的角度来看,它们有点像一个黑盒子。这意味着
它们的反应方式不一定与a
会的
这并不特定于flexbox——例如,如果在按钮上放置overflow:scroll
,我们不会渲染滚动条,也不会将其渲染为
表格,如果您将显示:表格
退一步说,这并不是特定于
的。考虑<代码> <代码>和<代码> <代码>,也有特殊的渲染。
行为
而像
和
和
这样的旧式HTML元素不支持自定义显示值,除了
为了回答非常高层次的问题“这是吗?”
元素块级别或内联级别”,用于在周围流动其他内容
元素
另见:
这是我最简单的技巧
button::before,
button::after {
content: '';
flex: 1 0 auto;
}
这是我最简单的技巧
button::before,
button::after {
content: '';
flex: 1 0 auto;
}
从Chrome 83开始,按钮
现在作为内联网格/grid/inline flex/flex
工作,您可以看到有关此新功能的更多信息
下面是一个片段(f
button::before,
button::after {
content: '';
flex: 1 0 auto;
}