如何仅通过CSS实现按钮置于文本下方？技术求助

当然可以只靠CSS实现这个需求！不用修改任何HTML代码，就能把两个按钮移到文本下方，下面给你两种简单的实现方案：

方案一：使用CSS Grid布局（推荐，按钮自动并排） #

Grid布局能直观控制元素的行位置，完美适配你的需求：

.box {
  background-color: yellow;
  display: grid;
  grid-template-rows: auto auto; /* 定义两行，第一行放文本，第二行放按钮 */
  gap: 12px; /* 可选：给文本和按钮之间添加上下间距 */
}

.yes, .no {
  grid-row: 2; /* 把两个按钮都定位到第二行 */
}

/* 保留你的原有样式，再加一点点按钮间距优化 */
.yes {
  background-color: green;
  padding: 10px;
  margin-right: 10px;
}

.no {
  background-color: red;
  padding: 10px;
}

原理说明：把.box设为网格容器后，grid-template-rows定义了两行自适应高度的区域。通过grid-row: 2让两个按钮都落在第二行，文本就会自动留在第一行，而且按钮会在第二行里并排显示，完全符合你的要求。

方案二：使用Flexbox布局（适合喜欢Flex的场景） #

如果你更习惯用Flex布局，也可以用这个方法把按钮推到文本下方：

.box {
  background-color: yellow;
  display: flex;
  flex-direction: column; /* 让元素垂直排列 */
  gap: 12px; /* 可选：添加上下间距 */
}

/* 先把两个按钮设置为行内块，保持并排 */
.yes {
  background-color: green;
  padding: 10px;
  display: inline-block;
  margin-right: 10px;
}

.no {
  background-color: red;
  padding: 10px;
  display: inline-block;
}

/* 用margin-top:auto把按钮行推到容器底部 */
.yes, .no {
  margin-top: auto;
  align-self: flex-start; /* 让按钮左对齐，避免默认拉伸占满宽度 */
}

原理说明：flex-direction: column让容器内元素垂直排列，margin-top: auto会自动填充按钮上方的空间，把按钮推到容器底部，文本自然就显示在上方了。给按钮加display: inline-block能让它们保持并排状态。

两种方案都不需要改动你的HTML代码，直接替换原有CSS就能生效啦～

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