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

Question

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

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

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

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

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

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

how to make text input and button the same height when assigning the text input fixed font-size?

css

height

text

button

font-size