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

时间:2013-09-23 03:43:49

标签: css tabs width panels spry

我有一个带有6个标签的标签式面板。我想设置CSS,以便每个标签的宽度更改为自动调整该标签中的文本,因此带有长句子的标签更宽,&短句更短的标签。我也希望面板的最大宽度为900px。

到目前为止这是我的CSS:

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

现在的问题是,所有6个标签始终保持900px,而不是自动调整以适应文本。你可以在这里看到结果: www.shellshockeddoc.com特别是“Watch”& “放映”

提前多多感谢!

3 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

删除标签类的宽度并添加margin:0 auto;padding:3px