顶部对齐 flexbox 中的文本

Question

我创建了一个布局，其中包含带文本的按钮。

我想要完成的是让 flexbox 在 IE 上正常工作，并弄清楚如何让文本在每个顶部对齐。

我尝试了 vertical-align: top; 但没有成功：

文本顶部对齐

.flexbox {
  width: 100%;
  table-layout: fixed;
}
.flexbox tr {
  display: flex;
}
.flexbox tr td {
  flex: 1;
  display: flex;
}
button {
  flex: 1;
}

<table class=flexbox>
  <tr>
    <td>
      <button>Hello there my name is bob and this is a test Hello there my name is bob and this is a test Hello there my name is bob and this is a test</button>
      <td style="vertical-align:top;">
        <button>B</button>
        <td>
          <button>C</button>
          <td>
            <button>D</button>
            <td>
              <button>E</button>
              <td>
                <button>GF</button>
              </td>
  </tr>
</table>

http://jsfiddle.net/tXS6w/443/

Answer 1

更改所有 button，除了第一列中的那些，例如：

<button>B</button>

span 包装其内容文本：

<button><span>B</span></button>

现在您可以根据需要设置 span 来填充 button 的 space:

button > span {
  position: absolute;
  top: 3px;
  left: 0px;
  right: 0px;
  bottom: 3px;
}

不要忘记 position button 作为 relative:

button {
  flex: 1;
  position: relative;
}

此外，作为旁注，始终缩进 html 并正确关闭标签（在本例中，缺少 td 的结束标签）是一种很好的做法。

See also a working responsive Fiddle here.

Answer 2

Flexbox 不适合 button 元素。事实上，.

这是一个可能适合您的备选方案。它是纯粹的 CSS，响应迅速并且可以跨浏览器工作（在 Chrome、FF 和 IE11 上测试过）。此外，不需要 height。

.flexbox {
  display: flex;
}
.flexbox > section {
  flex: 1;
  display: flex;
  text-align: center;
  margin: 10px;
  min-width: 50px;
  border: 1px solid #777;
  background: linear-gradient(to bottom, #fafafa 0%, #ddd 100%);
}
.flexbox > section > a {
  flex: 1;
  padding: 2px 5px;
  color: black;
  text-decoration: none;
}
.flexbox > section:hover {
  background: linear-gradient(to bottom, #f1f1f1 0%, #d1d1d1 100%);
}

<div class="flexbox">
  <section>
    <a href="javascript:void(0)">
      Hello there my name is bob and this is a test Hello there my name
      is bob and this is a test Hello there my name is bob and this is a
      test
    </a>
  </section>
  <section>
    <a href="javascript:void(0)">B</a>
  </section>
  <section>
    <a href="javascript:void(0)">C</a>
  </section>
  <section>
    <a href="javascript:void(0)">D</a>
  </section>
  <section>
    <a href="javascript:void(0)">E</a>
  </section>
  <section>
    <a href="javascript:void(0)">GF</a>
  </section>
</div>

顶部对齐 flexbox 中的文本

Top align text in flexbox

html

javascript

css

flexbox

jsFiddle