按钮弹性容器中的元素不会彼此相邻对齐[重复]答案

【问题标题】：Elements won't align next to each other in button flex container [duplicate]按钮弹性容器中的元素不会彼此相邻对齐[重复]
【发布时间】：2017-01-16 04:05:56
【问题描述】：

我有以下代码在 Chrome 和 IE 中按预期工作。但是在 Firefox 中，每个按钮中的第二个跨度显示在自己的行中。为什么是这样？如何解决这个问题？

https://jsbin.com/banafor/4/edit?html,css,output

期望（在 IE 中，Chrome 可以）：

失败（在 Firefox 中）：

.buttons-pane {
  width: 150px;
  height: 400px;
}
button {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
button .title {
  background-color: yellow;
}
button .interest {
  background-color: lightyellow;
}

<div class="buttons-pane">

  <button type="button">
    <span class="title">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet</span>
    <span class="interest">Short</span>
  </button>

  <button type="button">
    <span class="title">Neque porro quisquam</span>
    <span class="interest">LongInterest</span>
  </button>

  <button type="button">
    <span class="title">Vix aeterno vocibus vituperatoribus eu. Nec regione fuis</span>
    <span class="interest">Keyword</span>
  </button>

</div>

PS：如有必要，我不介意将跨度更改为其他内容:)

【问题讨论】：

将span 包装在div 中，然后将css 属性display:table; 添加到div 并将css 属性display:table-cell;vertical-align:middle; 添加到两个span。链接：jsbin.com/qiniwozilu/edit?html,css,output

标签： html css firefox flexbox

【解决方案1】：

flexbox 相对较新，并没有在旧浏览器中实现。试试

display: -webkit-flex;
display: -moz-flex;
display: flex;

【讨论】：

感谢您的建议。我将在我的生产代码中添加它。在这里，我尽量把事情说得最简单。

【解决方案2】：

似乎<button> 不能成为 Firefox 中的弹性容器。

无论如何，您都可以使用额外的span 来包装您的title 和interest 来解决这个问题

<button type="button" >
    <span class="wrapper">
      <span class="title">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet</span>
      <span class="interest">Short</span>
    </span>
</button>

css

.buttons-pane {
    width: 150px;
    height: 400px;
}

button .wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

button .wrapper .title {
  background-color: yellow;
}
button .wrapper .interest {
  /* max-width: 50px; */
  background-color: lightyellow;
}

jsbin

【讨论】：