Flexbox不处理按钮或字段集元素

本文介绍了Flexbox不处理按钮或字段集元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我尝试将将 参考文献： 错误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: 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 DemoNOTE: Although they cannot be flex containers, button elements can be flex items.References:Bug 984869 - display: flex doesn't work for button elementsBug 1176786 - Flexbox on a blockifies the contents but doesn't establish a flex formatting context 这篇关于Flexbox不处理按钮或字段集元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！