Html <；输入>；a中的标记<；部门>；标记失败
我正在尝试使用CSS网格定位div标记和其中的输入字段。一直失败的是垂直对齐。我在网上论坛上尝试了很多建议，但都不管用。将输入字段与div标记的底部对齐对我来说很重要。我将非常感谢任何帮助 我在包含输入的立即div中尝试了vertical align=“bottom”，也尝试了输入标记本身 我已尝试使用position=“absolute”和bottom=“0”Html <；输入>；a中的标记<；部门>；标记失败,html,css,input,grid,vertical-alignment,Html,Css,Input,Grid,Vertical Alignment,我正在尝试使用CSS网格定位div标记和其中的输入字段。一直失败的是垂直对齐。我在网上论坛上尝试了很多建议，但都不管用。将输入字段与div标记的底部对齐对我来说很重要。我将非常感谢任何帮助 我在包含输入的立即div中尝试了vertical align=“bottom”，也尝试了输入标记本身 我已尝试使用position=“absolute”和bottom=“0” 身体{ 字体系列：helvetica； 字体大小：36px； 颜色：白色； } .集装箱{ 显示：网格； 网格间距：5px； 网格模
身体{
字体系列：helvetica；
字体大小：36px；
颜色：白色；
}
.集装箱{
显示：网格；
网格间距：5px；
网格模板列：[打开参数]0.5fr[原子符号]1.0fr；
宽度：25%；
填充：3倍；
边框：3件纯色青色；
边界半径：5px；
}
.项目{
背景色：青色；
边界半径：5px；
边框：3件纯色青色；
高度：100px；
垂直对齐：底部对齐；
}
.项目：第n个孩子（1）{
网格行：1/5；
网格列：打开paren；
文本对齐：右对齐；
}
.项目：第n个孩子（2）{
网格行：4/9；
网格列：原子符号；
}
打开
div标签中包含的任何元素都与它的底部对齐。我不知道我是否理解正确，但这是将输入放在div下面
*{
填充：0；
保证金：0；
}
身体{
字体系列：helvetica；
字体大小：36px；
颜色：白色；
}
.集装箱{
显示：网格；
网格间距：5px；
网格模板柱：0.5fr 1fr；
宽度：50%；
填充：3倍；
边框：3件纯色青色；
边界半径：5px；
}
.项目{
显示：网格；
对齐项目：结束；
高度：100px；
边界半径：5px；
边框：3件纯色青色；
背景色：青色；
}
.项目p{
文本对齐：右对齐；
}
打开
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: helvetica;
font-size: 36px;
color: white;
}
.container {
display: grid;
grid-gap: 5px;
grid-template-columns: [open-paren] 0.5fr [atomic-symbol]1.0fr;
width: 25%;
padding: 3px;
border: 3px solid teal;
border-radius: 5px;
}
.item {
background-color: teal;
border-radius: 5px;
border: 3px solid teal;
height: 100px;
vertical-align: bottom;
}
.item:nth-child(1) {
grid-row: 1/5;
grid-column: open-paren;
text-align: right;
}
.item:nth-child(2) {
grid-row: 4/9;
grid-column: atomic-symbol;
}
</style>
</head>
<body>
<section class="container">
<div class="item">
<p vertical-align="text-bottom">Open</p>
</div>
<div class="item">
<input type="text" vertical-align="bottom">
</div>
</section>
</body>
</html>