Flex/Grid 布局不适用于按钮或字段集元素 [英] Flex / Grid layouts not working on button or fieldset elements

问题描述

我正在尝试将 标签的内部元素与 flexbox 的 justify-content: center 居中.但是 Safari 不会将它们居中.我可以将相同的样式应用于任何其他标签，并且它按预期工作(请参阅 <p>-tag).只有按钮是左对齐的.

尝试使用 Firefox 或 Chrome，您会发现不同之处.

是否有我必须覆盖的用户代理样式?或者这个问题的任何其他解决方案?

div {显示:弹性；弹性方向:列；宽度:100%；}按钮，p {显示:弹性；弹性方向:行；对齐内容:居中；}

<按钮><span>测试</span><span>测试</span><p><span>测试</span><span>测试</span></p>

还有一个 jsfiddle:http://jsfiddle.net/z3sfwtn2/2/

解决方案

问题

在某些浏览器中，除了在 block 和 之间切换之外，

元素不接受对其 display 值的更改>内联块.这意味着 元素不能是 flex 或 grid 容器，也不能是 .

除了 元素之外，您可能会发现此约束适用于

和

元素，也一样.

有关详细信息，请参阅下面的错误报告.

注意:虽然它们不能是弹性容器，但

元素可以是弹性项目.

<小时>

解决方案

有一个简单易行的跨浏览器解决方法来解决这个问题:

将 button 的内容包裹在 span 中，并使 span 成为弹性容器.

调整后的 HTML(将 button 内容包裹在 span 中)

<按钮><span><!-- 使用 div 也可以，但不是有效的 HTML --><span>测试</span><span>测试</span></span><p><span>测试</span><span>测试</span></p>

调整后的 CSS(目标 span)

按钮 >跨度，p{显示:弹性；弹性方向:行；对齐内容:居中；}

修改后的演示

<小时>

参考资料/错误报告

上的 Flexbox 会阻塞内容，但不建立弹性格式上下文

<块引用>

用户(Oriol Brufau):<button> 的子元素被阻止，正如 flexbox 规范所规定的那样.然而，

似乎建立了一个块格式上下文而不是一个 flex 上下文.

用户 (Daniel Holbert):这正是 HTML 规范所要求的.一些 HTML 容器元素是特殊的"，并且在 Gecko 中有效地忽略了它们的 CSS display 值[除了它是内联级还是块级].

就是其中之一.

&

也是.

在

中添加对 display:flex/grid 和 columnset 布局的支持; 元素

<块引用>

用户(丹尼尔·霍尔伯特):

无法在纯 CSS 中实现(通过浏览器)，因此从 CSS 的角度来看，它们有点像黑盒子.这意味着他们不一定以相同的方式做出反应，例如一个

这不是 flexbox 特有的——例如如果您将 overflow:scroll 放在按钮上，我们不会呈现滚动条，并且我们不会将其呈现为table 如果你把 display:table 放在上面.

退一步说，这不是

特有的.考虑

和

它们也有特殊的渲染行为.

还有像 和

和

这样的老式 HTML 元素不支持自定义 display 值，除了为了回答这是元素块级或内联级"，用于流动其他内容元素.

另见:

• Flexbug #9:某些 HTML 元素不能是 flex 容器
• 10.某些 HTML 元素不能是网格容器

I'm trying to center inner elements of a <button>-tag with flexbox's justify-content: center. But Safari does not center them. I can apply the same style to any other tags and it works as intended (see the <p>-tag). Only the button is left-aligned.

Try Firefox or Chrome and you can see the difference.

Is there any user agent style I have to overwrite? Or any other solution to this problem?

div {
  display: flex;
  flex-direction: column;
  width: 100%;
}
button, p {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

<div>
  <button>
    <span>Test</span>
    <span>Test</span>
  </button>
  <p>
    <span>Test</span>
    <span>Test</span>
  </p>
</div>

And a jsfiddle: http://jsfiddle.net/z3sfwtn2/2/

解决方案

The Problem

In some browsers the <button> element doesn't accept changes to its display value, beyond switching between block and inline-block. This means that a <button> element cannot be a flex or grid container, or a <table>, either.

In addition to <button> elements, you may find this constraint applying to <fieldset> and <legend> elements, as well.

See the bug reports below for more details.

Note: Although they cannot be flex containers, <button> elements can be flex items.

---

The Solution

There is a simple and easy cross-browser workaround to this problem:

Wrap the content of the button in a span, and make the span the flex container.

Adjusted HTML (wrapped button content in a span)

<div>
    <button>
        <span><!-- using a div also works but is not valid HTML -->
            <span>Test</span>
            <span>Test</span>
        </span>
    </button>
    <p>
        <span>Test</span>
        <span>Test</span>
    </p>
</div>

Adjusted CSS (targeted span)

button > span, p {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

Revised Demo

---

References / Bug Reports

Flexbox on a <button> blockifies the contents but doesn't establish a flex formatting context

User (Oriol Brufau): The children of the <button> are blockified, as dictates the flexbox spec. However, the <button> seems to establish a block formatting context instead of a flex one.

User (Daniel Holbert): That is effectively what the HTML spec requires. Several HTML container-elements are "special" and effectively ignore their CSS display value in Gecko [aside from whether it's inline-level vs. block-level]. <button> is one of these. <fieldset> & <legend> are as well.

Add support for display:flex/grid and columnset layout inside <button> elements

User (Daniel Holbert):

<button> is not implementable (by browsers) in pure CSS, so they are a bit of a black box, from the perspective of CSS. This means that they don't necessarily react in the same way that e.g. a <div> would.

This isn't specific to flexbox -- e.g. we don't render scrollbars if you put overflow:scroll on a button, and we don't render it as a table if you put display:table on it.

Stepping back even further, this isn't specific to <button>. Consider <fieldset> and <table> which also have special rendering behavior.

And old-timey HTML elements like <button> and <table> and <fieldset> simply do not support custom display values, other than for the purposes of answering the very high-level question of "is this element block-level or inline-level", for flowing other content around the element.

Also see:

• Flexbug #9: Some HTML elements can't be flex containers
• 10. Some HTML elements can't be grid containers

这篇关于Flex/Grid 布局不适用于按钮或字段集元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

登录 关闭

扫码关注1秒登录

发送“验证码”获取 | 15天全站免登陆

友情链接： IT屋 Chrome插件 谷歌浏览器插件

IT屋 ©2016-2022 琼ICP备2021000895号-1 站点地图 站点标签 SiteMap <免责申明> 本站内容来源互联网,如果侵犯您的权益请联系我们删除.