求助：Tab标签按钮未对齐，点击切换内容功能样式问题解决

用Flex布局快速搞定（更简单省心） #

给Tab按钮的容器加这段CSS：

.tab-container {
  display: flex;
  align-items: center; /* 让按钮垂直居中对齐 */
  justify-content: flex-start; /* 按钮靠左排列，要居中就换成center */
  gap: 8px; /* 按钮之间留些空隙 */
}

.tab-button {
  flex: 0 0 auto; /* 按钮宽度随内容走，不会被强行拉伸 */
  /* 这里可以加你的按钮样式，比如 padding: 8px 16px; border: 1px solid #ccc; 之类的 */
}

这样所有按钮会自动在同一行对齐，不会出现高低错落的情况。

要是非要用Grid布局，这么改 #

之前的Grid参数没设对，试试这个：

.tab-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, min-content); /* 每列宽度适配按钮内容 */
  align-items: center; /* 垂直对齐 */
  gap: 8px;
}

.tab-button {
  grid-row: 1; /* 强制所有按钮都在第一行，避免错位 */
}

别乱设grid-column，用auto-fit让Grid自动适配按钮数量，再统一行号就能对齐了。

额外提醒 #

• 给所有Tab按钮设统一的padding和height，别让有的按钮内容多就变高
• 去掉按钮默认的外边距，用容器的gap来控制间距更规整
• 选中状态的按钮可以改背景或边框，但别改尺寸，保持和其他按钮一样大

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