表单元素居中对齐及提交按钮宽度100%失效问题求助

嘿，我来帮你搞定这两个表单样式的问题～

问题1：表单元素整体居中，字段左侧文本左对齐 #

你之前给.form-style和.container加了justify-content: center和align-items: center，但这会让所有子元素（包括标签）都水平居中，所以才达不到“标签左对齐、整体表单居中”的效果。

咱们可以这么调整：

1. 先让整个表单容器（.form-style）保持水平居中的状态，去掉align-items: center（或者保留，但给每个表单字段的容器单独设置宽度）；
2. 给每个包含标签和输入框的小组件设置宽度100%，再让标签强制左对齐。

修改后的核心样式代码：

.form-style {
  width: 50%;
  position: relative;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  /* 移除align-items: center，避免所有子元素水平居中 */
  margin: 0 auto; /* 确保整个表单在页面中水平居中 */
}

.container {
  width: 100%; /* 让每个字段容器占满表单宽度 */
  display: flex;
  flex-flow: column wrap;
}

.container label {
  text-align: left; /* 强制标签左对齐 */
  display: block; /* 让标签独占一行，确保对齐生效 */
}

这样一来，整个表单在页面里是50%宽度居中的，每个字段的标签会乖乖靠左，输入框也会占满字段容器的宽度，完美符合你的需求～

问题2：提交按钮设为100%宽度仍有空隙 #

这个问题基本是盒模型在搞鬼！默认情况下，CSS元素的width只计算内容区域，不包含内边距和边框，如果按钮的父元素有padding，或者按钮本身有默认的边距，就会出现“明明设了100%却有空隙”的情况。

解决起来很简单，给按钮加一行关键样式：

input[type="submit"] {
  display: block;
  background-color: #08ABD9;
  font-family: 'jura', sans-serif;
  font-size: 16pt;
  font-weight: bold;
  height: 40px;
  border: none;
  margin-top: 40px;
  margin-bottom: 0px;
  width: 100%;
  box-sizing: border-box; /* 让宽度包含内边距和边框，避免超出父容器 */
}

另外你可以检查一下按钮的父容器有没有左右padding，如果有的话，要么去掉父容器的padding，要么确保父容器的宽度是100%，这样按钮加上box-sizing: border-box后就能完全填满父容器的宽度啦～

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