如何实现三个不同宽度按钮等高且单行排列？

核心思路 #

借助Flexbox布局实现按钮的同行等高排列，通过内边距控制按钮尺寸而非固定宽高，同时确保文本完美居中。

代码实现 #

HTML结构

<div class="button-group">
  <button class="btn">短文本</button>
  <button class="btn">中等长度文本按钮</button>
  <button class="btn">这是一个很长很长的文本按钮</button>
</div>

CSS样式

.button-group {
  display: flex;
  gap: 10px; /* 按钮间的间距，可按需调整 */
  align-items: stretch; /* 强制所有按钮高度一致，自动匹配最高项 */
}

.btn {
  padding: 10px 20px; /* 用内边距控制按钮大小，宽度由内容自动撑开 */
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f5f5f5;
  color: #333;
  /* 确保文本居中 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 可选：禁止文本换行，保持按钮单行 */
  white-space: nowrap;
  /* 移除默认按钮的基线对齐问题 */
  vertical-align: middle;
}

关键说明 #

1. Flex容器设置：display: flex让按钮自动同行排列，align-items: stretch会让所有按钮高度与容器内最高的按钮保持一致，彻底解决错位问题。
2. 按钮尺寸控制：放弃固定width，改用padding来控制按钮的左右留白，按钮宽度由自身文本内容+内边距自动计算，既不会出现短文本按钮空间冗余，也不会让长文本按钮空间不足。
3. 文本居中处理：按钮内部用inline-flex配合align-items和justify-content，无论按钮高度如何变化，文本都能保持垂直+水平居中，解决之前的居中失效问题。
4. 基线对齐修复：添加vertical-align: middle避免按钮因默认基线对齐导致的细微错位。

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