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

Posted 2023-03-07

【中文标题】基于最大内容并排的相同宽度选项卡

【英文标题】：Same width tabs based on largest content side by side

【发布时间】：2018-11-07 15:06:11

【问题描述】：

所以我想达到的条件是

每个选项卡的宽度基于标签 所有选项卡的大小与最长的选项卡相同（带有最长的标签） 因此，标签组应该

不

固定或占据父级的 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;

有什么想法吗？

【参考方案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/

【讨论】：

谢谢你，但是这使得整个标签组 100%，这不是我想要做的。宽度应基于最长的标签。所以最长的标签宽度乘以标签的数量。我更新了问题以更清楚。

@AlexK - 如果您希望选项卡具有动态宽度，则必须将父级定义为 flex 而不是 inline-flex。控制父宽度的一种方法是明确定义它，比如 60%。我已更新链接作为示例，以将父级定义为手动宽度。

谢谢。如前所述，标签的长度应基于最长的标签，因此父标签不应为 100%，也不应具有定义的宽度。