如何让按钮高度精准匹配相邻输入框？（jQuery待办项场景）

嘿，这个问题我之前也踩过坑！手动调height和padding总是容易有偏差，其实用现代CSS布局就能轻松搞定，给你几个靠谱的方法：

1. 首选：Flexbox布局（最省心） #

这是目前最简洁高效的方式，完全不用手动计算高度，浏览器会自动帮你对齐。

实现步骤： #

• 把输入框和按钮放在同一个父容器里，给父容器设置display: flex
• 给输入框加flex: 1让它占满剩余空间
• 统一输入框和按钮的box-sizing、border、padding、font-size，再去掉中间的边框让它们紧密衔接

示例代码：

<div class="todo-input-wrap">
  <input type="text" placeholder="输入待办项">
  <button>+</button>
</div>

.todo-input-wrap {
  display: flex;
  /* 去掉元素间的默认间距，实现紧密衔接 */
  gap: 0;
}

.todo-input-wrap input,
.todo-input-wrap button {
  box-sizing: border-box;
  border: 1px solid #ccc;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
}

.todo-input-wrap input {
  flex: 1;
  /* 去掉输入框右边框，和按钮无缝衔接 */
  border-right: none;
}

.todo-input-wrap button {
  /* 去掉按钮左边框 */
  border-left: none;
  cursor: pointer;
}

这样不管你怎么调整padding或字体大小，两者的高度都会自动保持一致，完美贴合！

2. 备选：CSS Grid布局 #

如果更习惯用Grid，效果一样好：

.todo-input-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
}

/* 下面的输入框和按钮样式和Flexbox方案一致即可 */

3. 兼容旧浏览器方案（inline-block） #

如果需要兼容IE这类旧浏览器，可以用inline-block配合vertical-align: middle，但要注意统一所有影响高度的属性：

.todo-input-wrap input,
.todo-input-wrap button {
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
  border: 1px solid #ccc;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  line-height: 1.2;
}

.todo-input-wrap input {
  width: calc(100% - 40px); /* 手动计算剩余宽度，不如Flex灵活 */
  border-right: none;
}

.todo-input-wrap button {
  width: 40px;
  border-left: none;
}

为什么之前的方法失效？ #

你之前遇到的问题大概率是因为浏览器给输入框和按钮的默认样式不一致（比如不同的padding、border、line-height），加上没有统一box-sizing，导致手动设置的height被内边距和边框撑开，高度计算出现偏差。

用上面的方案统一所有影响高度的属性，再借助现代布局的自动对齐能力，就能彻底解决这个问题啦！

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