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元素不支持自定义显示值,除了
为了回答非常高层次的问题“这是吗?”
元素块级别或内联级别”,用于在周围流动其他内容
元素
另见:
这是我最简单的技巧
button::before,
button::after {
content: '';
flex: 1 0 auto;
}
从Chrome 83开始,按钮
现在作为内联网格/grid/inline flex/flex
工作,您可以看到有关此新功能的更多信息
以下是一个片段(适用于使用Chrome83及以上浏览器的用户)
按钮{
显示:内联flex;
高度:2em;
对齐项目:柔性端;
宽度:4rem;
-webkit外观:无;
证明内容:柔性端;
}
你好
类似的问题:我明白为什么它可能不适用于
s,但它究竟为什么也不适用于
?该元素不应该被视为对flex容器有效的常规块级元素吗?@fritzmg。同意。该规则可能预先存在CSS3技术,如Flex和Grid,应该重新评估。。。但仍可能误用其他东西,并将其放置在按钮内。听起来像其他Web一样的逻辑……Migelyb考虑添加一个引用到你做断言的实际文本。无需回复我的评论-如果你将其添加到你做出断言的文本中,我会给你一个向上投票。div
不能是按钮的子元素,因为如果你在老式HTML中考虑它,块级元素不能是内联级元素的子元素。但今天,有了HTML5,技术上正确的答案是。span
表示短语内容,但div
不表示。div
表示流内容。不适合我。您将如何解决此问题:
button > span, p {
display: flex;
flex-direction: row;
justify-content: center;
}
button::before,
button::after {
content: '';
flex: 1 0 auto;
}