0

我有一个带有 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特别是“观看”和“放映”选项卡

提前非常感谢！

4

3 回答 3

0

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

于 2013-09-23T04:45:39.437 回答
0

删除选项卡类的宽度并添加margin:0 auto;padding:3px

于 2013-09-23T12:27:00.013 回答
0

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

于 2013-09-23T03:47:47.327 回答