Flexbox不处理按钮或字段集元素 [英] Flexbox not working on button or fieldset elements

问题描述

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

尝试使用Firefox或Chrome，您可以看到不同之处。有任何用户代理风格，我不得不覆盖？或者任何其他解决这个问题的方法？

data-babel =false>

div {display：flex; flex-direction：column; width：100％;} button，p {display：flex; flex-direction：row; justify-content：center;}

< div> <按钮> <跨度>试验< /跨度> <跨度>试验< /跨度> < /按钮> < p为H. <跨度>试验< /跨度> <跨度>试验< /跨度> < / div>

：
http://jsfiddle.net/z3sfwtn2/2/

$问题在于< button> 元素在某些元素中不能是flex容器浏览器。

根据浏览器的不同，某些HTML元素不会接受 display 更改。其中三个元素是：
$ b $ ul


<按钮>

< fieldset>

<图例>

这个想法是在HTML元素样式化时保持常识。例如，该规则可防止作者将字段集转换为表。

然而，在这种情况下有一个简单的解决方法：

解决方案：将按钮的内容封装在 ，并将 span 放置在flex容器中。




< 调整过的HTML （包含按钮内容 span ）

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

调整好的CSS （定位 span


 按钮> span，p {
 display：flex; 
 flex-direction：row; 
 justify-content：center; 
 
  

按钮。

参考文献：

• 错误984869 - 显示：flex对按钮元素不起作用
>

• 错误1176786 - Flexbox上的内容会阻止内容，但不会建立flex格式上下文

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 is that the <button> element cannot be a flex container in some browsers.

Depending on the browser, certain HTML elements will not accept display changes. Three of these elements are:

• <button>
• <fieldset>
• <legend>

The idea is to maintain a level of common sense when styling HTML elements. For instance, the rule prevents authors from turning a fieldset into a table.

However, there is an easy workaround in this case:

Solution: 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

NOTE: Although they cannot be flex containers, button elements can be flex items.

References:

• Bug 984869 - display: flex doesn't work for button elements
• Bug 1176786 - Flexbox on a blockifies the contents but doesn't establish a flex formatting context

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