<按钮>中的文本和图像在 Firefox 中使用 flexbox 不会停留在同一行 [英] Text and image in &lt;button&gt; won&#39;t stay on same line using flexbox in Firefox

问题描述

我想显示一个带有图片和文字的按钮.文本和图像必须居中并在同一行/行上.

在 Firefox 中，图像和文本总是在不同的行上.我该如何解决这个问题?

这就是我所拥有的:

button {显示:inline-flex；弹性方向:行；flex-wrap: nowrap;对齐内容:居中；对齐内容:拉伸；对齐项目:居中；}按钮 img {订单:0；弹性:0 1 自动；对齐自我:自动；}按钮跨度{订单:0；弹性:0 1 自动；对齐自我:自动；}

JsFiddle

解决方案

某些 HTML 元素，按照设计，不接受 display 更改.其中三个元素是:

例如，display: table 不适用于 fieldset.

同样，将 display: inline-flex 应用到 button 将被浏览器忽略.

还有其他合理的限制.例如，某些浏览器会忽略 button 元素上的 overflow: scroll.(已测试:Firefox，无滚动；Chrome，有)

<块引用>

所以，最重要的是，button 元素不能是 flex 容器.

简单的解决方法是将 button 的内容包装在 div 中，并且使 div 成为弹性容器.或者(如评论中所述)使用 span 而不是 div，因为这样可以保持标准合规性.

HTML

<div><img src="http://placehold.it/10x10"><span>点击我</span>

CSS

div {显示:弹性；对齐内容:居中；对齐项目:居中；}

演示

注意:虽然它们不能是 flex 容器，但 button 元素可以是 flex 项.

在此处了解更多信息:

• 错误 984869 - 显示:flex 不适用于按钮元素
• Bug 1176786 - Flexbox 阻塞了内容但没有建立 flex 格式上下文

I'd like to display a button with an image and text. The text and image must be centered and on the same row/line.

In Firefox the image and text are always on separate lines. How can I solve this?

This is what I've got:

button {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: stretch;
    align-items: center;
}

button img {
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
}

button span {
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
}

JsFiddle

解决方案

Certain HTML elements, by design, do not accept display changes. Three of these elements are:

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

For instance, display: table won't work on fieldset.

Similarly, applying display: inline-flex to button will be ignored by the browser.

There are other sensible restrictions. For instance, some browsers will ignore overflow: scroll on button elements. (Tested: Firefox, no scroll; Chrome, yes)

So, bottom line, a button element cannot be a flex container.

The easy fix is to wrap the content of the button in a div, and make the div the flex container. Or (as mentioned in the comments) use a span instead of a div, as this maintains standards compliance.

HTML

<button href="#">
    <div>
        <img src="http://placehold.it/10x10">
        <span>Click me</span>
    </div>
</button>

CSS

div {
    display: flex;
    justify-content: center;
    align-items: center;
    }

DEMO

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

Learn more here:

• 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

这篇关于<按钮>中的文本和图像在 Firefox 中使用 flexbox 不会停留在同一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！