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

Posted 2023-03-06

技术标签:

【中文标题】分配文本输入固定字体大小时，如何使文本输入和按钮具有相同的高度？【英文标题】：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>

【讨论】：

以上是关于分配文本输入固定字体大小时，如何使文本输入和按钮具有相同的高度？的主要内容，如果未能解决你的问题，请参考以下文章