表单对齐折叠成单行答案

【问题标题】：Form alignment collapses into single row表单对齐折叠成单行
【发布时间】：2019-08-14 23:13:17
【问题描述】：

我将父元素设置为 newTableForm，并将 labelColumn 和 mainFormColumn 作为子元素 - 但使用当前的 CSS，所有内容都折叠成一行：

.newTableForm {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 30px 30px 30px 40px;
  grid-gap: 10px;
  grid-template-areas: "... main" "labels main" "labels main" "... main";
  border: 2px dashed deeppink;
}

.labelColumn {
  grid-area: labels;
}

.mainFormColumn {
  grid-area: main;
}

<form method='post' action="/admin-post.php" class="newTableForm">
  <h4 class="mainFormColumn">
    Add a new price compare table
  </h4>
  <label for="store" class="labelColumn">Store</label>
  <input type="text" name="store" placeholder="" class="mainFormColumn"/>
  <label for="product-page" class="labelColumn">Product Page Link</label>
  <input type="text" name="product-page" placeholder="Copy address here" class="mainFormColumn" />
  <button class="mainFormColumn">Save new price compare table</button>
</form>

有没有办法撤消这里的单列堆叠行为？如果不是带有 ...（标签部分上方和下方）的空白部分，我会完全删除模板区域

【问题讨论】：

还从.labelColumn & .mainFormColumn 中删除网格区域以及您想要的布局类型

标签： html css alignment css-grid

【解决方案1】：

您可以再次删除grid-template-areas，因为多个网格区域重叠 - 您可以为此使用伪元素：

使用grid-column: 1 将labelColumn 放入第一列，使用grid-column: 2 将mainFormColumn 放入第二列。
after 元素将是最后一行中的第一列，使用grid-row: -2和grid-column: 1
before 将是第一列在第一行使用grid-column: 1

请看下面的演示：

.newTableForm {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 30px 30px 30px 40px;
  grid-gap: 10px;
  border: 2px dashed deeppink;
}

.labelColumn {
  grid-column: 1;
}

.mainFormColumn {
  grid-column: 2;
}
.newTableForm:after, .newTableForm:before {
  content: '';
  display: block;
  grid-column: 1;
}

.newTableForm:after {
  grid-row: -2;
}

<form method='post' action="/admin-post.php" class="newTableForm">
  <h4 class="mainFormColumn">
    Add a new price compare table
  </h4>
  <label for="store" class="labelColumn">Store</label>
  <input type="text" name="store" placeholder="" class="mainFormColumn"/>
  <label for="product-page" class="labelColumn">Product Page Link</label>
  <input type="text" name="product-page" placeholder="Copy address here" class="mainFormColumn" />

  <button class="mainFormColumn">Save new price compare table</button>
</form>

【讨论】：

【解决方案2】：

我只是用一些更新来更新你的.newTableForm css。我希望它会帮助你。谢谢

.newTableForm {
  display: flex;
  flex-direction: column;
  border: 2px dashed deeppink;
}

【讨论】：

您好，此代码解决了堆叠问题。但我想要一个左列标签，这不行。