表单中动态增减按钮的对齐问题解决求助

1. 固定右侧蓝色内容区域高度 #

给蓝色内容容器设置固定高度，搭配垂直滚动条避免内容溢出撑高容器：

.blue-content {
  height: 400px; /* 根据需求调整高度值 */
  overflow-y: auto; /* 内容超出时显示滚动条 */
  flex-shrink: 0; /* 防止在flex布局中被压缩 */
}

2. 让减号按钮与对应行对齐 #

把每一行的表单元素放到一个flex容器里，设置垂直居中：

.form-item-row {
  display: flex;
  align-items: center; /* 垂直居中所有元素 */
  gap: 10px; /* 元素之间留间距 */
  margin-bottom: 15px; /* 行与行之间的间距 */
}

把减号按钮直接放在对应行的form-item-row容器内，就能和该行的输入框等元素对齐。

3. 调整加号按钮的对齐位置 #

如果想把加号按钮固定在表单底部右侧，可以用定位实现：

.form-wrapper {
  position: relative;
  padding-bottom: 60px; /* 给按钮留出空间 */
}
.add-button {
  position: absolute;
  bottom: 20px;
  right: 20px;
}

要是用flex布局，也可以让按钮自动靠下靠右：

.form-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.add-btn-container {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
  padding: 15px 0;
}

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