自动调整选项卡式面板的每个选项卡的宽度答案

【问题标题】：Auto Adjusting Width for each Tab of a Tabbed Panel自动调整选项卡式面板的每个选项卡的宽度
【发布时间】：2013-09-23 03:43:48
【问题描述】：

我有一个带有 6 个选项卡的选项卡式面板。我想设置 CSS，以便每个选项卡的宽度发生变化以自动适应该选项卡中的文本，因此长句的选项卡更宽，而短句的选项卡更窄。我还希望面板的最大宽度为 900 像素。

到目前为止，这是我的 CSS：

#TabbedPanels2 .TabbedPanelsContentGroup {
margin-left:auto;
margin-right:auto;
width:70%;
margin-top:105px;
max-width:900px;
}

现在的问题是所有 6 个标签始终保持在 900 像素，而不是自动向下调整以适应文本。你可以在这里看到结果： www.shellshockeddoc.com 特别是“观看”和“放映”标签

提前非常感谢！

【问题讨论】：

标签： css tabs width panels spry

【解决方案1】：

您应该使用width: 100%; max-width: 900px; 并定义min-width: 0px;，因为您对此有问题。

【讨论】：

谢谢！我刚刚尝试过，它给了我和以前一样的结果。无论如何，标签似乎总是保持在 900 像素。
还是没有运气。最小宽度没有改变任何东西。
你没有在你的网站中定义最大宽度，检查一下
谢谢！我刚刚进行了所有更改并上传了新的 CSS，但结果仍然相同。

【解决方案2】：

display: inline-block; 将导致元素跨越其内容的宽度，而不是其容器的宽度。如果将display: inline-block; 添加到.TabbedPanelsContent 和.TabbedPanelsContentGroup，然后将text-align: center; 添加到.TabbedPanels，您将获得（居中）不同宽度的标签框，具体取决于其内容的宽度。

【讨论】：

【解决方案3】：

去掉tab类的宽度，添加margin:0 auto;padding:3px

【讨论】：

非常感谢！我试试看。