如何在HTML表单同一行的两个input字段间添加间距并对齐其他字段

你的问题出在flex布局下输入框的宽度控制和间距设置上，以下是修正后的代码及说明：

修正后的CSS代码 #

.contact-form {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}

/* 关键：添加盒模型重置，避免padding撑开宽度 */
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.contact-form textarea {
  height: 100px;
}

.contact-form button {
  background-color: #ff9700;
  color: #fff;
  padding: 10px;
  border: none;
  cursor: pointer;
}

.contact-form button:hover {
  background-color: #ff7b25;
}

.split-fields {
  display: flex;
  /* 添加横向间距 */
  gap: 10px;
}

/* 让两个输入框平分容器宽度 */
.split-fields input {
  width: auto;
  flex: 1;
}

关键修改点说明 #

1. 盒模型重置：添加box-sizing: border-box，让输入框的padding和border包含在设置的宽度内，避免整体宽度超出容器，保证和下方输入框对齐。
2. flex布局适配：给.split-fields添加gap:10px，直接设置两个输入框的横向间距；同时给内部input设置flex:1，让它们自动平分父容器的可用宽度，替代原来的width:100%，避免宽度冲突。
3. 保留原有样式：其他样式保持不变，确保表单整体风格统一。

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