我有选项卡，我希望他们有相同的宽度，但使它适合与最长的文本选项卡。
我现在要做的是，因为我知道最长的文本制表符，我手动设置宽度为rem。但如果添加的新文本比设计的文本更长，就会出现这种情况（在整页中观察）：
第一个
在这个例子中，长文本使制表符换行，因为宽度是固定的。同样在这种情况下，其他制表符的高度不会下降以填充高度，而只是在底部留有间距。我该如何处理这两种情况呢？（宽度相等，如果所有制表符及其文本换行没有空间，则适合高度）
我有选项卡，我希望他们有相同的宽度，但使它适合与最长的文本选项卡。
我现在要做的是，因为我知道最长的文本制表符，我手动设置宽度为rem。但如果添加的新文本比设计的文本更长，就会出现这种情况（在整页中观察）：
第一个
在这个例子中，长文本使制表符换行，因为宽度是固定的。同样在这种情况下，其他制表符的高度不会下降以填充高度，而只是在底部留有间距。我该如何处理这两种情况呢？（宽度相等，如果所有制表符及其文本换行没有空间，则适合高度）
1条答案
按热度按时间rta7y2nd1#
我不知道如何用纯css解决方案来实现这一点，我很想看看tacoshy提到的网格方法。
但是这里有一个使用JS的方法。
所以你可以做的就是创建一个CSS变量
--link-width: max-content，基本上每个链接都足够宽，它的内容可以放在一行中。然后你可以计算具有最大宽度的链接，并将该值设置为CSS变量。由于该变量是在
nav-link类上使用的，因此新的宽度将应用于所有链接。注意：我们使用
offsetWidth而不是clientWidth来计算元素的宽度，因为offsetWidth也考虑了边框第一个
尽管如此，正如您在本例中所看到的，如果选项卡最后太宽，它们看起来会很奇怪，所以最好不要让所有选项卡都具有相同的宽度