Question

我创建了一个布局，其中有带文字的按钮。

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

我试了vertical-align: top;没有运气：

文字在顶部对齐

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

Flexbox与button元素不相称。实际上，button doesn't even recognize flex properties in some browsers。

这是一个可能适合您的替代方案。它是纯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>

jsFiddle

Answer 2

更改所有button，但第一列除外，例如：

<button>B</button>

让span包装其内容文字：

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

现在，您可以根据需要设置span以填充button的空间：

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

不要忘记position button为relative：

button {
  flex: 1;
  position: relative;
}

另外，作为旁注，最好始终缩进html并正确关闭标签（在这种情况下，td s'结束标签丢失了。）

See also a working responsive Fiddle here.

在flexbox中顶部对齐文本

2 个答案:

jsFiddle