如何使用HTML与CSS创建包含两个垂直分区的表单

解决方案 #

你不需要使用表格实现该布局，仅需要调整Flex布局相关属性即可达到预期效果，修改后的完整CSS代码如下，原有HTML代码无需改动：

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
}

#app {
  border: 1px dotted black;
  padding: 1.5em;
  width: 30em;
}

/* 新增form容器布局规则，实现左右分栏 */
form {
  display: flex;
  gap: 1em;
  align-items: stretch;
}

#left-div {
  display: inline-block;
  padding: 0.5em;
  border: 1px dotted black;
  flex: 1;
}

#left-div input {
  width: 2em;
  margin: 0.5em;
}

#left-div label {
  margin: 0.5em 0em 0.5em 0em;
  display: inline-block;
}


/* 右侧啤酒字段区域修改 */
#div-chopp {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px dotted black;
  padding: 0.5em;
  flex: 1;
}

#div-chopp label {
  display: block;
  text-align: center;
  margin-bottom: 0.5em;
}

#div-chopp input {
  width: 2em;
}

核心调整说明 #

• 给form外层容器设置display: flex，让左右两个功能区域自动横向排列，gap属性控制两个区域的间距，避免内容拥挤
• 左右两个区域都添加了flex: 1属性，平分表单的可用宽度
• 右侧容器将flex流改为纵向排列，通过align-items: center实现内部标签、输入框水平居中，justify-content: center让内容在容器内垂直居中
• 给右侧标签添加text-align: center，避免长文案折行后出现左对齐的显示问题

内容的提问来源于stack exchange，提问作者Matheus Wagner