如何让FAQ模块中的所有"+"按钮实现垂直对齐？

你当前用justify-content: space-between导致按钮位置随文本长度变化，核心原因是flex容器里元素的宽度分配没固定按钮位置。以下两种方案都能搞定：

方案1：Flex布局优化 #

给.question添加垂直居中对齐，同时让问题文本占据所有可用空间，把按钮挤到最右侧：

.question {
  display: flex;
  justify-content: space-between;
  align-items: center; /* 让按钮和文本垂直居中对齐 */
}

.question p {
  flex: 1; /* 文本占满除按钮外的所有宽度 */
  margin-right: 1rem; /* 可选：给文本和按钮加间距 */
}

方案2：Grid布局（更简洁） #

把.question改成Grid布局，直接定义两列，第一列自动占满剩余空间，第二列适配按钮宽度，按钮会严格对齐：

.question {
  display: grid;
  grid-template-columns: 1fr auto; /* 第一列占满，第二列自适应 */
  align-items: center; /* 垂直居中 */
  gap: 1rem; /* 文本和按钮的间距 */
}

/* 让回答内容横跨整行 */
.question > div {
  grid-column: 1 / -1;
  margin-top: 0.5rem;
}

不管用哪种方案，按钮都会固定在右侧同一垂直位置，不会再随问题长度乱跑。

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