Html 表单对齐折叠为一行

我将父元素设置为

newTableForm

，并将

labelColumn

和

mainFormColumn

作为子元素-但使用当前CSS，所有内容都折叠成一行：

.newTableForm{
显示：网格；
网格模板柱：1fr 3fr；
网格模板行：30px 30px 30px 40px；
栅隙：10px；
网格模板区域：“…main”“labels main”“labels main”“…main”；
边框：2件深粉色；
}
B.labelColumn{
网格区域：标签；
}
.mainFormColumn{
网格区域：主；
}

添加一个新的价格比较表
商场
产品页面链接
保存新的价格比较表

我只是更新了你的

.newTableForm

css，并做了一些更新。我希望它能帮助你。谢谢

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

---

同样，当多个网格区域重叠时，您可以删除

网格模板区域

——您可以使用伪元素：

• 使用

  grid column:1将
  labelColumn
  放入第一列，使用
  grid column:2将
  mainFormColumn
  放入第二列
  

• after

  元素将是最后一行的第一列，使用

  网格行：-2

  和

  网格列：1

• before

  将是第一行的第一列，使用

  网格列：1

请参见下面的演示：

.newTableForm{
显示：网格；
网格模板柱：1fr 3fr；
网格模板行：30px 30px 30px 40px；
栅隙：10px；
边框：2件深粉色；
}
B.labelColumn{
网格柱：1；
}
.mainFormColumn{
网格柱：2；
}
.newTableForm:之后，.newTableForm:之前{
内容：''；
显示：块；
网格柱：1；
}
.newTableForm：之后{
网格行：-2；
}

添加一个新的价格比较表
商场
产品页面链接
保存新的价格比较表

同时从

.labelColumn和.mainFormColumn

中删除网格区域，以及您需要的布局类型。该代码消除了堆叠问题。但我想要一列左边的标签，但这并不能做到这一点。