CSS布局问题：如何将复选框放置在文本输入框下方？InputBar适配求解

• 父容器.background默认使用横向排列的flex布局，没有调整排列方向，导致.inputBar、.check两个子元素被强制横向并排摆放，这是复选框出现在输入栏末尾的直接原因。
• .inputBar设置width: 100%的同时加了padding-left: 30%，默认盒模型下padding会额外增加元素实际宽度，导致元素溢出、挤占其他元素的布局空间。
• .check设置为inline-block类型，在横向flex布局下不会自动换行到下一行。

1. 修改父容器.background的flex布局方向 #

将原有CSS调整为：

.background {
  background-image: url("../Back.jpg");
  background-repeat: no-repeat;
  margin: -11px -16px 0 -16px;
  background-size: 100%;
  min-height: 300px;
  display: flex;
  /* 新增：将flex排列方向改为纵向，让所有子元素默认上下堆叠 */
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

调整后，.inputBar和.check会自动分成上下两行排列，不再横向挤在同一行。

2. 修正.inputBar的宽度溢出问题 #

原有写法的宽度计算存在溢出，调整为：

.inputBar {
  width: 100%;
  /* 新增：开启全局盒模型，让padding、border计入元素设定宽度，避免溢出 */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 保留原有内部元素样式，删掉原来写在.inputBar上的padding-left: 30%，把居中对齐的逻辑移到flex属性上实现 */
.inputBar .enterButton {
  background: url("../arrowNext.svg") no-repeat center white;
  height: 50px;
  width: 35px;
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
  vertical-align: top;
}
.inputBar .enterText {
  color: $primary-text-color-light;
  width: 60%;
  height: 50px;
  border-top-left-radius: 100px;
  border-bottom-left-radius: 100px;
  display: inline-block;
  vertical-align: top;
  padding-left: 2%;
}

3. 调整复选框区域的布局位置 #

原有.check的样式会导致元素在flex布局下不独立成行，调整为：

.check {
  width: 100%;
  box-sizing: border-box;
  /* 和上方输入框的左边缘保持对齐 */
  padding-left: calc(30% + 2%);
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}
/* 删掉原.checkBox上多余的padding-left:30%属性，避免改变原生复选框的交互尺寸 */
.check .checkBox {
  width: 40px;
  height: 20px;
  background: #555;
  margin: 5px;
  border-radius: 3px;
}
.check .checkBoxText {
  font-weight: bold;
  font-size: larger;
  color: grey;
  background-color: whitesmoke;
}

• 如果当前使用的是原生CSS而非SCSS，需要把原来嵌套写在类内部的子元素样式展开成平级选择器，否则样式无法正常生效。
• 调整完成后无需改动原有HTML结构，即可实现复选框独立位于输入栏下方的效果。

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