带有顶部标签的表单有效但不带侧面标签

Question

这有效：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

* {
  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; } */

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

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

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

结果演示：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;