如何在居中form-group内左对齐radio button和checkbox及页面滚动设置

1. 居中容器内的单选框/复选框左对齐 #

当前.form-group设置了text-align: center，导致所有内容居中。要让单选框和复选框左对齐但保持整体在居中区域，可按以下方式修改：

步骤1：给目标表单组添加专属类 #

在HTML中，给包含单选框和复选框的.form-group分别添加类名：

<!-- 单选框所在组 -->
<div class="form-group radio-group">
  <label> Based on my portfolio/resume, would you say that I am job ready?<br/>
    <input type="radio" name="referal" class="inline" value="definitely" /> Definitely</label><br/>
  <!-- 其他单选框代码... -->
</div>

<!-- 复选框所在组 -->
<div class="form-group checkbox-group">
  <p>What would you like to see improved? <span class="clue">(Check all that apply)</span></p>
  <label>
    <input type="checkbox" name="improved" class="input-checkbox" value="frontend"/> Front-End skills<br/>
    <!-- 其他复选框代码... -->
  </label>
</div>

步骤2：修改CSS样式 #

调整.form-group基础样式，并给新增类设置左对齐+居中容器：

.form-group {
  margin: 1rem auto; /* 保持上下间距，整体居中 */
  max-width: 500px; /* 限制表单组最大宽度，确保居中效果 */
}

/* 单选框/复选框组左对齐 */
.radio-group, .checkbox-group {
  text-align: left;
  padding-left: 1rem; /* 可选：添加左侧内边距优化视觉 */
}

2. 让表单占满页面并自动出现滚动条 #

当前页面内容仅停留在顶部，需调整页面高度和容器样式，实现滚动效果：

步骤1：修正页面高度基础设置 #

给html和body设置最小高度，确保页面覆盖视口：

html, body {
  min-height: 100vh; /* 确保页面至少占满浏览器视口高度 */
  margin: 0;
  padding: 0;
}

body {
  background: url(images/tech2.webp);
  background-size: cover; /* 替代100%，避免背景图拉伸变形 */
  background-position: center; /* 背景图居中显示 */
}

步骤2：调整容器与头部样式 #

去掉容器顶部多余间距，优化头部可读性：

header {
  text-align: center;
  padding: 1.5rem 0;
  background-color: rgba(255, 255, 255, 0.7); /* 可选：添加半透明背景提升可读性 */
}

.container {
  grid-column: 5 / 9;
  max-width: 600px;
  margin: 0 auto 2rem; /* 去掉顶部margin，仅保留底部间距 */
  padding: 2rem;
  border: 1px solid black;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.763);
}

步骤3：修复HTML标签嵌套错误 #

原HTML中标签闭合顺序错误，将：

</div>
</form>
</div>

修正为：

</form>
</div>

确保.container正确包裹form标签，避免布局异常。

完成修改后，当表单内容超过视口高度时，页面会自动出现滚动条，同时表单整体占满页面空间。

内容的提问来源于stack exchange，提问作者Devinci' Codes