neolicd neolicd - 4 months ago 10
CSS Question

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



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





I'd like to create a simple text and button page. The requirement is:


  1. The text and button are both on the bottom,

  2. The text and button have the same height and are aligned,

  3. The text has fixed font-size (e.g. 50px)



How can I achieve that? The text is much bigger than the button now.

Answer

Flexbox can do that:

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