基于最长标签实现等宽并排Tabs的解决方案求助

这里有个完美适配你需求的方案，能同时满足三个要求：所有Tab自动匹配最长标签的宽度、保持并排布局、Tab组仅适配内容宽度不占满父容器。

核心思路 #

使用CSS Grid布局，它天生支持让所有网格项（这里的Tab）继承最长项的宽度，同时通过grid-auto-flow: column实现横向排列，再配合inline-grid让容器宽度由内容决定，不会强制占满父容器。

修改后的代码 #

HTML（无需改动）

<div class="wrapper"> 
  <ul class="tab-group"> 
    <li class="single-tab">Tab 1</li> 
    <li class="single-tab">Tab 2</li> 
    <li class="single-tab">Very Long Tab Name</li> 
    <li class="single-tab active">Tab 4</li> 
    <li class="single-tab">Tab 5</li> 
  </ul> 
</div>

SCSS

$active-color: #262933; 
$inactive-color: #B3B4B8; 
$inactive-font-color: #8B8C8F; 
$border-thickness: 1px; 
$border-radius: 3px; 

body { 
  background: #fff; 
  padding: 20px; 
  font-family: Helvetica; 
} 

.wrapper { 
  display: inline-block; 
} 

.tab-group { 
  display: inline-grid; /* 让容器宽度适配内容 */
  grid-auto-columns: 1fr; /* 所有列等宽，宽度由最长项决定 */
  grid-auto-flow: column; /* 横向排列Tab */
  list-style: none; 
  padding: 0;
  margin: 0;
} 

.single-tab { 
  background-color: #fff; 
  border: $border-thickness solid $inactive-color; 
  color: $inactive-font-color; 
  cursor: normal; 
  font-size: 14px; 
  padding: 9px 21px; 
  user-select: none; 
  display: flex; 
  justify-content: center; 
  align-items: center; /* 垂直居中内容 */
  text-align: center;
} 

/* 移除相邻Tab的右侧边框，避免边框重叠 */
.single-tab:not(:last-child) {
  border-right: none;
}

.single-tab:first-child { 
  border-radius: $border-radius 0 0 $border-radius; 
} 

.single-tab:last-child { 
  border-radius: 0 $border-radius $border-radius 0; 
  border-right: $border-thickness solid $inactive-color; 
} 

.single-tab.active { 
  background-color: $active-color; 
  border-color: $active-color; 
  color: #fff; 
  position: relative;
  z-index: 1; /* 让active的边框覆盖相邻Tab的边框，避免颜色冲突 */
} 

为什么这个方案有效 #

• 等宽效果：grid-auto-columns: 1fr让所有Tab列宽度均分容器的总宽度，而容器的总宽度由最长的Tab内容决定，所以所有Tab自动匹配最长项的宽度。
• 并排布局：grid-auto-flow: column强制Grid横向排列所有Tab，完美实现并排效果。
• 适配内容宽度：inline-grid让Tab组容器仅占据内容所需的宽度，不会强制拉伸填满父容器。

另外，通过z-index处理active状态的边框覆盖问题，避免了相邻Tab边框颜色冲突的问题，比之前手动移除相邻边框的写法更简洁可靠。

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