如何在表单中垂直对齐复选框？

你只需要针对表单里的<label>元素做简单设置就能实现垂直排列，以下两种方法都可以：

方法一：将label设为块级元素 #

块级元素会自动占据整行，让每个复选框和标签单独一行：

/* 新增这段CSS */
.form label {
  display: block;
  margin: 8px 0; /* 可选，增加上下间距让布局更舒服 */
}

方法二：用Flexbox垂直布局 #

给表单容器设置垂直方向的flex布局，也能快速实现垂直排列，还能方便调整间距：

/* 新增这段CSS */
.form {
  display: flex;
  flex-direction: column;
  align-items: center; /* 保持复选框居中对齐，和父容器的text-align对应 */
  gap: 8px; /* 可选，设置选项之间的间距 */
}

修改后的完整CSS代码 #

/* first div class with h1 elemnt */
.a {
  background-color: cadetblue;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 10px solid black;
}

/* text of survey in first div */
.schrift {
  font-size: 40px;
  color: antiquewhite;
}

/*body */
body {
  background-color: aliceblue;
}

/* second div with p elemnt descriping the survey */
.description {
  width: 700px;
  height: 200px;
  border: 1px solid black;
  margin: 0 auto;

  margin-top: 40px;
  text-align: center;
}

/* p elemnt in second div  just the class of the text */
.text {
  font-size: 30px;
  text-align: center;
}

/* third div */
.questions {
  padding-top: 50px;
  text-align: center;
  font-size: 40px;
}

/* 新增的复选框垂直布局样式 */
.form label {
  display: block;
  margin: 8px 0;
}

之前尝试没奏效大概率是因为没把样式加到正确的元素上——你需要针对包裹复选框的<label>或者表单容器.form设置，而不是父级的.questions哦。

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