gpt4 book ai didi

css - 分配文本输入固定字体大小时,如何使文本输入和按钮的高度相同?

转载 作者:行者123 更新时间:2023-11-28 09:24:31 25 4
gpt4 key购买 nike

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

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

  1. 文字和按钮都在底部,
  2. 文本和按钮具有相同的高度并对齐,
  3. 文本具有固定的字体大小(例如 50px)

我怎样才能做到这一点?文本现在比按钮大得多。

最佳答案

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>

关于css - 分配文本输入固定字体大小时,如何使文本输入和按钮的高度相同?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38718596/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com