我正在尝试创建一个包含 3 个表单的布局,其中我只有 1 个表单。 我的问题是内容如何扩展到总高度,使输入字段和按钮变高。这在只有“form-1”时是不可见的,但我需要并行添加多个表单,因此仅添加一个表单不能解决需求。
Question: How can I set the height to be same as the labels, without setting fixed heights?
.wrapper-for-forms {
display: grid;
grid-template:
'form-1 form-2 form-3' 500px
/1fr 1fr 1fr;
}
.form-1 {
display: grid;
grid-template-columns: 200px 400px;
grid-gap: 16px;
}
.form-1 {
margin-top: 10px;
}
label {
grid-column: 1 / 2;
}
input,
button {
grid-column: 2 / 3;
}
<div class="wrapper-for-forms">
<form class="form-1">
<label for="firstName" class="first-name">First Name</label>
<input id="firstName" type="text">
<label for="lastName" class="last-name">Last Name</label>
<input id="lastName" type="text">
<button>Submit</button>
</form>
<div class="form-2">Form-2</div>
<div class="form-3">Form-3</div>
</div>
最佳答案
您可以简单地将此行 grid-template:'form-1 form-2 form-3' 500px/1fr 1fr 1fr
更改为 grid-template:'form-1 form- 2 form-3' 500px repeat(3, 1fr);
或删除 500px
所以它看起来像 grid-template:'form-1 form-2 form-3'重复(3, 1fr);
.wrapper-for-forms {
display: grid;
grid-template: 'form-1 form-2 form-3' 500px repeat(3, 1fr);
}
.form-1 {
display: grid;
grid-template-columns: 200px 400px;
grid-gap: 16px;
}
.form-1 {
margin-top: 10px;
}
label {
grid-column: 1 / 2;
}
input,
button {
grid-column: 2 / 3;
}
<div class="wrapper-for-forms">
<form class="form-1">
<label for="firstName" class="first-name">First Name</label>
<input id="firstName" type="text">
<label for="lastName" class="last-name">Last Name</label>
<input id="lastName" type="text">
<button>Submit</button>
</form>
<div class="form-2">Form-2</div>
<div class="form-3">Form-3</div>
</div>
如果您想改变方向,只需将上面的内容更改为 grid-template:'form-1 form-2 form-3';
.wrapper-for-forms {
display: grid;
grid-template: 'form-1 form-2 form-3';
}
.form-1 {
display: grid;
grid-template-columns: 200px 400px;
grid-gap: 16px;
}
.form-1 {
margin-top: 10px;
}
label {
grid-column: 1 / 2;
}
input,
button {
grid-column: 2 / 3;
}
<div class="wrapper-for-forms">
<form class="form-1">
<label for="firstName" class="first-name">First Name</label>
<input id="firstName" type="text">
<label for="lastName" class="last-name">Last Name</label>
<input id="lastName" type="text">
<button>Submit</button>
</form>
<div class="form-2">Form-2</div>
<div class="form-3">Form-3</div>
</div>
关于html - 调整表格中标签/输入的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63903125/