我将父元素设置为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>
有没有办法撤消这里的单列堆叠行为?如果不是因为空白部分,我会完全删除模板区域......(标签部分上方和下方(
当多个网格区域重叠时,您可以删除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>
我只是用一些更新来更新你的.newTableForm
css。我希望它能帮助你。谢谢
.newTableForm {
display: flex;
flex-direction: column;
border: 2px dashed deeppink;
}