html - 在表单中调整标签/输入的高度

Question

我正在尝试创建具有 3 个表单的布局，其中我只有 1 个表单。我的问题是内容如何扩展到总高度，使输入字段和按钮变高。只有“form-1”时这是不可见的，但我需要并行添加多个表单，因此仅添加一个表单并不能解决需求。

问题：如何在不设置固定高度的情况下将高度设置为与标签相同？

.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>

标签： htmlcsscss-grid

Answer 1

您可以简单地将这一行更改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' repeat(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>