分配文本输入固定字体大小时，如何使文本输入和按钮具有相同的高度？
Posted
技术标签:
【中文标题】分配文本输入固定字体大小时，如何使文本输入和按钮具有相同的高度？【英文标题】：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 像素）
我怎样才能做到这一点？现在文字比按钮大很多。
【问题讨论】：
【参考方案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>【讨论】：
以上是关于分配文本输入固定字体大小时，如何使文本输入和按钮具有相同的高度？的主要内容，如果未能解决你的问题，请参考以下文章
html代码如何设置一个文本框和按钮，使点击按钮后跳转至新"固定值+输入文本“的网页