如何使用CSS flexbox实现三个表单输入框同排等宽对齐

需调整的问题点 #

• 删除.shipping-div选择器下硬编码的margin-right: 15rem，该属性会强行偏移三列输入框的整体位置，导致无法与上下单行输入框对齐
• 移除各容器上无意义的重复flex-wrap: wrap、冗余的居中对齐属性，避免布局规则冲突
• 给.shipping-div设置与上下单行输入框一致的宽度（同全局输入框的50%宽度），添加gap属性控制三个输入框的横向间距
• 给.shipping-div下直接包裹输入框的三个div子元素设置flex: 1，让三个容器等分整行宽度
• 给.shipping-div内的输入框设置width: 100%，配合box-sizing: border-box让输入框完全撑满父容器，实现等宽效果，覆盖全局输入框的50%宽度规则
• 给所有输入框添加box-sizing: border-box，避免padding把输入框撑出父容器宽度，导致错位

修正后完整代码 #

CSS代码 #

.shipping-containers {
  height: 100vh;
  width: 100%;
  border: 2px solid black;
  display: flex;
  flex-direction: column;
  background: red;
  justify-content: center;
  align-items: center;
}

.shipping-wrapper {
  display: flex;
  flex-direction: column;
  width: 70%;
  background: lightskyblue;
  align-items: center;
}

.shipping-wrapper>form {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  border: 1px solid black;
  padding: 20px 0;
}

.shipping-div {
  display: flex;
  flex-direction: row;
  width: 50%;
  gap: 10px;
  margin-bottom: 10px;
}

.shipping-div > div {
  flex: 1;
}

.shipping-div input {
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

.shipping-wrapper input {
  width: 50%;
  font-size: 14px;
  padding: 15px;
  background: #f1f1f1;
  margin-bottom: 10px;
  box-sizing: border-box;
}

.shipping-wrapper button {
  width: 50%;
  padding: 15px;
  border: none;
  background: #1976d2;
  color: #fff;
  cursor: pointer;
}

HTML代码 #

<div class="shipping-containers">
  <div class="shipping-wrapper">
    <form>
      <input type="text" placeholder="name" />
      <input type="text" placeholder="address" />
      <div class="shipping-div">
        <div>
          <input type="text" placeholder="city" class="shipping-input" />
        </div>
        <div>
          <input type="text" placeholder="zip code" class="shipping-input" />
        </div>
        <div>
          <input type="text" placeholder="state" class="shipping-input" />
        </div>
      </div>
      <input type="text" placeholder="Country" class="shipping-input" />
      <button>Continue</button>
    </form>
  </div>
</div>

实现效果 #

修复后city、zip code、state三个输入框将在同一行等宽展示，整行宽度与上方姓名、地址输入框及下方国家输入框完全对齐，输入框间保留合理间距，符合预期设计要求。

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