基于最大内容并排的相同宽度选项卡

Question

所以我想达到的条件是

• 每个选项卡的宽度基于标签
• 所有选项卡的大小与最长的选项卡相同（带有最长的标签）
  • 因此，标签组应该不固定或占据父级的 100%。应该基于最长的标签。
• 选项卡的布局是并排的。

这是我目前的进度（与最大宽度不同）：https://jsfiddle.net/cyhwx7z0/5/

我试过this solution，但布局不是并排的。 https://jsfiddle.net/alexkwa/L9oy6hbp/1/

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: flex;
  flex-direction: column;
  list-style: none;
}

.single-tab {
  background-color: #fff;
  border: $border-thickness solid $inactive-color;
  border-right: 0;
  border-sizing: border-box;
  color: $inactive-font-color;
  cursor: normal;
  font-size: 14px;
  padding: 9px 21px;
  margin: 0;  
  margin-left: -6px;
  user-select: none; 

  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.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: $border-thickness solid $active-color;
  color: #fff;
}

.single-tab.active + .single-tab {
  border-left: 0;
}

.single-tab:last-child.active {
  border-left: 0;
}

有什么想法吗？

Answer 1

试试这个

.tab-group {
  display: flex; // instead of inline flex
  ... all other styles
}

.single-tab {
  flex: 1; // makes your tabs of same width
  ... all other styles
}

这是工作小提琴 - https://jsfiddle.net/flexdinesh/xuc6amcu/2/

如果您要求父级不占用整个宽度，则必须手动定义它，例如 60%。小提琴示例 - https://jsfiddle.net/flexdinesh/xuc6amcu/3/