如何在分配文本输入固定字体大小时使文本输入和按钮高度相同？
问题描述：
* {
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像素）
我该如何做到这一点？文字比现在的按钮大得多。
答
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>
完美解决，谢谢！ – neolicd