如何实现表单文本输入框边框重叠（类似表格border-collapse）

要解决相邻输入框边框叠加成2px的问题，我们可以通过负外边距+统一边框设置的方式，让边框重叠呈现出1px的视觉效果，就像表格的border-collapse: collapse一样。下面是具体的实现方案和优化后的代码：

核心思路 #

• 给相邻的输入框（或其包裹容器）设置margin-bottom: -1px，让下方元素向上偏移1px，刚好覆盖上方元素的底部边框，实现边框合并。
• 确保所有输入框的边框样式完全一致（宽度、颜色、样式），避免重叠后出现颜色或粗细不一致的问题。
• 移除输入框默认的box-shadow（如果有的话），防止阴影叠加影响视觉效果。

优化后的代码示例 #

CSS 代码 #

/* 全局基础样式重置与统一 */
label {
  width: 15em;
  display: inline-block;
  vertical-align: top;
}

input {
  width: 23em;
  border: 1px solid black; /* 统一边框样式，避免重复设置 */
  box-shadow: none; /* 移除默认阴影，防止重叠干扰 */
  background-color: antiquewhite;
}

/* 分组容器内的元素处理 */
.group div,
.group input {
  margin-bottom: -1px; /* 负外边距让边框重叠 */
}

/* 地址输入组的样式 */
.get {
  width: 23em;
  display: inline-block;
}

/* 直接堆叠的输入框处理（比如地址组内的输入框） */
.get input:not(:first-child) {
  margin-top: -1px; /* 上方输入框的底部边框和当前输入框的顶部边框重叠 */
  border-top: none; /* 可选：去掉顶部边框，进一步确保不会出现双边框 */
}

HTML 代码 #

<!-- 姓名输入组 -->
<div class="group">
  <div>
    <label for="first_name">First Name:</label>
    <input type="text" id="first_name" class="get">
  </div>
  <div>
    <label for="last_name">Last Name:</label>
    <input type="text" id="last_name" class="get">
  </div>
</div>

<!-- 地址输入组 -->
<div>
  <label for="address_1_ln_1">Address 1:</label>
  <div class="get">
    <input type="text" id="address_1_ln_1">
    <input type="text" id="address_1_ln_2">
  </div>
</div>
<div>
  <label for="address_2_ln_1">Address 2:</label>
  <div class="get">
    <input type="text" id="address_2_ln_1">
    <input type="text" id="address_2_ln_2">
  </div>
</div>

<!-- 单独的输入框 -->
<div>
  <label for="city">City:</label>
  <input type="text" id="city" class="get">
</div>
<div>
  <label for="state">State:</label>
  <input type="text" id="state" class="get">
</div>
<div>
  <label for="zip">Zip:</label>
  <input type="text" id="zip" class="get">
</div>

额外说明 #

• 对于直接在同一容器内堆叠的输入框（比如地址组里的两个输入框），除了负margin，还可以选择性地去掉第二个输入框的顶部边框，这样即使有微小的布局偏差，也不会出现双边框。
• 如果你的表单有响应式需求，可以根据屏幕尺寸调整负margin的数值，但通常1px就足够适配大部分场景。

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