如何让两个inline-block链接/按钮等高（HTML+CSS实现）

方案1（改动最小，不破坏原有行内布局） #

你之前尝试display: inline-flex没得到预期效果，核心是缺少父容器的拉伸配置，这个方案完全不会破坏你原本的inline-block横向排布逻辑，只需要两步：

• 找到两个按钮的直接父容器，添加如下样式：

/* 替换成你实际的父容器选择器即可 */
.btn-group {
  display: inline-flex;
  align-items: stretch; /* 核心属性：强制所有子元素高度撑满父容器，自动等高 */
}

• 给#left、#right两个按钮移除写死的固定高度属性，保留原有内边距、边框、字号等样式即可，两个按钮会自动匹配内容更多一侧的高度，不需要手动计算高度值。

说明：inline-flex类型的父容器对外表现和inline-block完全一致，不会出现块级元素独占整行的问题，专门适配行内排布的按钮、链接场景，不会打乱现有布局结构。

方案2（不修改父容器，直接给按钮加样式） #

如果不方便调整父元素属性，可以直接通过ID选择器写高优先级样式覆盖原有规则：

#left, #right {
  display: inline-flex;
  align-items: center; /* 让按钮内文本垂直居中 */
  vertical-align: top; /* 修正行内元素默认基线对齐导致的高度错位 */
  height: 100%;
  /* 原有其他样式保留即可 */
}
/* 给父容器补一行清除行内间隙的属性，避免两个按钮之间出现多余空白 */
.btn-group {
  font-size: 0;
}
/* 给按钮单独设置你需要的字号，不受父容器font-size:0影响 */
#left, #right {
  font-size: 14px; /* 替换成你实际需要的字号 */
}

• 之前你单独给按钮加inline-flex没生效，本质是两个问题：一是没给父容器开弹性布局的拉伸规则，子元素不会自动撑高；二是没加vertical-align: top，行内元素默认按文本基线对齐，会出现底部对不齐、高度计算偏差的问题
• 不用担心flex会破坏原有行内布局：inline-flex容器本身的行内表现和inline-block几乎没有区别，不会出现块级元素自动占满整行的问题，对按钮、链接这类行内交互元素的适配非常成熟
• 你用ID选择器写样式的思路是对的，ID选择器优先级高于类选择器，不需要额外加!important就能覆盖原有类的样式规则

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