Question

我将父元素设置为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>

这里是否有一种方法可以撤消单列堆叠行为？如果没有空白部分，我将完全删除模板区域，而...（标签部分的上方和下方）

Answer 1

同样，您可以将grid-template-areas放置为多个网格区域重叠-并且可以为此使用伪元素：

使用{{1}将labelColumn放入第一列，使用{{1将grid-column: 1放入第二列 }}。

mainFormColumn

grid-column: 2

after元素将成为最后一行中的第一列 > 使用grid-row: -2

grid-column: 1将成为第一行中的第一列。

请参见下面的演示

before

grid-column: 1

Answer 2

我只是通过一些更新来更新您的.newTableForm CSS。希望对您有帮助。谢谢

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

表单对齐折叠为单行

2 个答案: