Flex / Grid布局不适用于按钮或字段集元素

  • Z时代
  • 2024-01-10
  • 分类：问答

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

尝试使用Firefox或Chrome，您会发现其中的区别。

有什么我必须覆盖的用户代理样式？或对此问题有任何其他解决方案？

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>

回答：

回答：

在某些浏览器中，除了在和之间切换之外，该<button>元素不接受对其display值的更改。这意味着元素不能是flex或grid容器，也不能是a。block``inline-block``<button>``<table>

除了<button>元素之外，您可能还会发现此约束也适用于<fieldset>和<legend>元素。

有关更多详细信息，请参见下面的错误报告。

注意：虽然它们不能是弹性容器，但是<button>元素可以是弹性项目。

回答：

有一个简单易用的跨浏览器解决方法，可以解决此问题：

调整后的HTML（button位于中的包装内容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>

调整后的CSS（定位的span）

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

回答：

Flexbox会<button>阻止内容，但不会建立Flex格式化上下文

用户（Oriol Brufau）：

的子级已<button>被屏蔽，因为它指定了flexbox规范。但是，<button>似乎建立了一个块格式化上下文而不是一个flex上下文。

用户（Daniel Holbert）： 实际上，这是HTML规范所需要的。

几个HTML容器元素是“特殊的”，并且display在Gecko中有效地忽略了它们的CSS

值（除了它是内联级别还是块级别）。<button>是其中之一。<fieldset>＆<legend>也是如此。

添加支持显示：内弯曲/网格和columnset布局<button>元素

用户（Daniel Holbert）：

<button>不能在纯CSS中实现（由浏览器实现），因此从CSS的角度来看，它们有点黑盒子。这意味着它们不一定以与例如a <div>。相同的方式做出反应。

_这不是特定于flexbox的-

例如，如果您放置overflow:scroll按钮，则不会渲染滚动条，如果您放置按钮，则不会渲染为表格display:table。

向后退一步，这不是特定于的<button>。考虑<fieldset>和<table>具有特殊的渲染行为。

而带点儿怀旧HTML元素，如<button>与<table>和<fieldset>根本不支持自定义display值，比回答的非常高级的问题的目的，其他的“是该元素的块级或行内”，该元素周围流动等内容。

以上是 Flex / Grid布局不适用于按钮或字段集元素 的全部内容， 来源链接： utcz.com/qa/413314.html

回到顶部