如何将表单内的两个按钮并排且居中对齐？

问题原因 #

你之前的操作没生效，核心原因如下：

• 直接给按钮加margin-left:500px会让按钮超出容器宽度，被迫换行变成垂直排列
• align-items:center加在form上，仅对form的直接子元素（.container）生效，无法控制容器内部的按钮

解决方法 #

把两个按钮放进一个独立的容器里，给这个容器设置flex布局实现按钮并排，同时让容器水平居中，还能灵活控制按钮间距。

修改后的代码 #

CSS 部分

input[type="submit"], input[type="button"] {
  color: black;
  padding: 20px 50px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  /* 合并选择器，减少重复代码 */
}

.container {
  margin-top: 10px;
  margin-bottom: 200px;
  margin-right: 400px;
  margin-left: 400px;
  padding: 25px;
}

.button-group {
  display: flex;
  justify-content: center;
  gap: 20px; /* 控制按钮之间的间距 */
  margin-top: 20px; /* 拉开和上方表单元素的距离 */
}

HTML 部分

<form id="GetInTouch" onsubmit="callFunction()">
  <div class="container">
    <h1> Contact Form </h1>
    <label for="first_name">
        <b> First Name *</b>
      </label>
    <input type="text" name="first_name" id="first_name" />
    <label for="surname">
        <b> Surname *</b>
      </label>
    <input type="text" name="surname" id="surname" />
    <label for="email">
        <b> Email *</b>
      </label>
    <input type="email" name="email" id="email" required />
    <!-- 将按钮放入专用容器 -->
    <div class="button-group">
      <input type="submit" value="Submit">
      <input type="button" onclick="resetFunction()" value="Reset">
    </div>
  </div>
</form>

效果说明 #

• .button-group的display:flex让按钮横向并排
• justify-content:center确保按钮组在容器内水平居中
• gap属性灵活控制两个按钮的间距，避免拥挤

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