Question

＆＃13;

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

＆＃13;

<!DOCTYPE html>
<html>
<body>
    <form>
        <input id="m" type="text">
        <button>POST</button>
    </form>
</body>
</html>

＆＃13;

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

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

我怎样才能实现这一目标？文本比现在的按钮大得多。

Answer 1

Flexbox可以做到这一点：

＆＃13;

* {
  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%;
}

＆＃13;

<form>
  <input id="m" type="text">
  <button>POST</button>
</form>

＆＃13;

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

1 个答案: