分配文本输入固定字体大小时，如何使文本输入和按钮具有相同的高度？答案

【问题标题】：how to make text input and button the same height when assigning the text input fixed font-size?分配文本输入固定字体大小时，如何使文本输入和按钮具有相同的高度？
【发布时间】：2016-12-07 16:47:27
【问题描述】：

* {
    padding: 0;
    margin: 0;
    border: 1px solid red;
    box-sizing: border-box;
}

form {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

form input {
    width: 90%;
    font-size: 50px;
    vertical-align: middle;
}

form button {
    width: 9%;
    vertical-align: middle;
}

<!DOCTYPE html>
<html>
<body>
    <form>
        <input id="m" type="text">
        <button>POST</button>
    </form>
</body>
</html>

我想创建一个简单的文本和按钮页面。要求是：

文字和按钮都在底部，
文本和按钮具有相同的高度并对齐，
文本具有固定的字体大小（例如 50 像素）

我怎样才能做到这一点？现在文字比按钮大很多。

【问题讨论】：

标签： css button text height font-size

【解决方案1】：

Flexbox 可以做到这一点：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
form {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
}
form input {
  width: 90%;
  font-size: 50px;
}
form button {
  width: 9%;
}

<form>
  <input id="m" type="text">
  <button>POST</button>
</form>

【讨论】：