带有顶部标签的表单有效，但不适用于侧标签

Question

这个有效：

* {
  box-sizing: border-box;
}

.parent {
  display: grid;
  /* grid-template-areas: 
  "contact comments"
  "... button";*/
  grid-template-rows: 12em;
  grid-template-columns: 12em;
  grid-gap: .8em;
  background: yellow; // for debugging
  padding: 0;
}

.lp {
  // label properties
  padding: 0.4em; //1.1em
  background-color: cyan;
}

.ip {
  // input properties
  padding: 0.4em; //1.1em
  margin-bottom: 1.5em;
  background-color: lightyellow;
}

// maps areas to markup elements
.lnam { grid-area: 1/1; } // label Name area -> label elem
.inam { grid-area: 2/1; } // input Name area -> input elem 
.leml { grid-area: 3/1; } // ditto for Email
.ieml { grid-area: 4/1; }

.ltel { grid-area: 5 / 1; } // and Telephone

.itel { grid-area: 6/1; }

<form class="parent">
  <div>
    <label class="lp lnam" for="name">Name</label>
    <input class="ip inam" type="text" id="name" required>
    <label class="lp leml" for="email">Email</label>
    <input class="ip ieml" type="text" id="email" required>
    <label class="lp ltel" for="tph">Phone</label>
    <input class="ip itel" type="text" id="tph" required>
  </div>
</form>

但无法让 label 侧工作。 input 元素位于标签下方，但它应该跟在同一行的 label 之后。下面的代码与上面使用相同标记的代码几乎相同。差异：grid-area 规格和 grid-template-columns（边 label 有两列）

* {
  box-sizing: border-box;
}

.parent {
  display: grid;
  /* grid-template-areas: 
  "contact comments"
  "... button";*/
  grid-template-rows: 4em;
  grid-template-columns: 150px 200px;
  grid-gap: .8em;
  background: yellow;
  padding: 0;
}

.lp {
  padding: 0.4em; //1.1em
  //border: 1px solid blue;
  background-color: cyan;
}

.ip {
  padding: 0.4em; //1.1em
  //border: 1px solid blue;
  margin-bottom: 1.5em;
  background-color: lightgreen;
}

.lnam {
  grid-area: 1/1 /2/2;
} // area -> element

.inam {
  grid-area: 1/2 /2/3;
}

/* .leml { grid-area: 3/11; }
.ieml { grid-area: 4/1; }
.ltel { grid-area: 5/1; }
.itel { grid-area: 6/1; } */

<form class="parent">
  <div>
    <label class="lp lnam" for="name">Name</label>
    <input class="ip inam" type="text" id="name" required>
    <!--<label class="lp leml" for="email">Email</label>
<input class="ip ieml" type="text" id="email" required>
<label class="lp ltel" for="tph">Phone</label>
<input class="ip itel" type="text" id="tph" required>-->
  </div>
</form>

我同时使用了 Firefox 和 Chrome，得到了相同的结果。我做错了什么？

Answer 1

您应该记住，网格项只是网格容器的直接子项，而不是所有后代。因此将选择器 .parent 更改为 parent > div 以使其工作并删除 grid-area 属性，因为即使没有此属性，网格项目也会自动对齐。

我假设您希望标签列按内容占用宽度，文本框占用所有剩余宽度。另外我认为您不希望您的网格轨道为 12em 高度。所以我更改了 grid-template-columns 并删除了 grid-temaplate-rows.

结果演示：

* {
  box-sizing: border-box;
}

.parent > div {
  display: grid;
  /* grid-template-areas: 
  "contact comments"
  "... button";*/
  grid-template-columns: auto 1fr;
  grid-gap: .8em;
  background: yellow; // for debugging
  padding: 0;
}

.lp {
  // label properties
  padding: 0.4em; //1.1em
  background-color: cyan;
}

.ip {
  // input properties
  padding: 0.4em; //1.1em
  margin-bottom: 1.5em;
  background-color: lightyellow;
}

<form class="parent">
  <div>
    <label class="lp lnam" for="name">Name</label>
    <input class="ip inam" type="text" id="name" required>
    <label class="lp leml" for="email">Email</label>
    <input class="ip ieml" type="text" id="email" required>
    <label class="lp ltel" for="tph">Phone</label>
    <input class="ip itel" type="text" id="tph" required>
  </div>
</form>

带有顶部标签的表单有效，但不适用于侧标签

Form with top labels works but not with side labels

css

css-grid