Vue3自定义按钮与输入框同行高度不一致问题求助

核心原因 #

浏览器对<input>这类表单元素自带默认的用户代理样式（比如内边距、边框、行高），而你的自定义按钮设置了padding: 0.75rem 1.5rem，两者的盒模型参数不匹配，最终导致整体高度出现差异。

具体解决方法 #

方法1：统一盒模型与基础样式（推荐） #

给input和button统一设置盒模型、字体、内边距、边框参数，确保两者高度完全对齐：

1. 先添加全局盒模型重置（避免元素宽高计算逻辑不一致）：

* {
  box-sizing: border-box;
}

2. 在父组件或全局样式中覆盖input的默认样式，匹配按钮的参数：

input[type="number"] {
  padding: 0.75rem; /* 和按钮上下内边距保持一致，左右可按需调整 */
  font-family: inherit; /* 统一字体 */
  font-size: inherit; /* 继承父元素字体大小，保证文本高度一致 */
  border: 1px solid #29282b; /* 和按钮边框样式统一 */
  vertical-align: middle; /* 确保垂直对齐 */
}

按钮保持现有样式不变即可，两者会因相同的上下padding+边框高度实现高度一致。

方法2：基于按钮高度反向调整输入框 #

如果不想修改按钮的padding，可以先计算按钮总高度（上下padding + 边框 + 字体行高），再给input设置对应高度：

input[type="number"] {
  height: calc(0.75rem*2 + 1em + 2px); /* 0.75rem上下padding + 字体行高1em + 2px边框（1px上下） */
  padding: 0 0.5rem; /* 左右内边距按需调整 */
  font-family: inherit;
  font-size: inherit;
  border: 1px solid #29282b;
  vertical-align: middle;
}

方法3：用Flex布局自动对齐 #

给input和按钮的父容器设置flex布局，通过align-items: stretch让子元素自动匹配高度：

<div class="input-button-group">
  <input v-model="goCell" type="number" size="3" min="1" max="26" @keyup.enter="myExtra(goCell)"/>
  <base-button @click="myExtra(goCell)" mode="flat">
    {{$t('Extra meassure')}}
  </base-button>
</div>

.input-button-group {
  display: flex;
  gap: 0.5rem; /* 可选，设置元素间间距 */
}

.input-button-group input,
.input-button-group button {
  flex: 0 1 auto; /* 不强制拉伸宽度，保持自身尺寸 */
}

/* 统一基础样式 */
.input-button-group input {
  font-family: inherit;
  font-size: inherit;
  border: 1px solid #29282b;
}

验证要点 #

• 检查是否有全局样式覆盖了input或button的padding/border属性
• 确保两者line-height一致，避免文本垂直位置偏差
• 多浏览器测试（Chrome/Firefox/Safari），不同浏览器的默认表单样式可能略有差异

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