HTML/CSS标签导航

Question

我正在开发一个应用程序，用户将能够打开标签页。为了您的笔记，我使用Bootstrap CSS框架，并且它也有一个选项卡插件。 （如果我需要一个更灵活的方式，我可以使用一个不同的库这项工作。）

http://twitter.github.com/bootstrap/javascript.html#tabs

我需要的是有标签灵活的宽度。它应该像Chrome/Firefox的标签一样工作。如果选项卡的总宽度小于条的宽度，它应该按原样工作。但是，如果它的宽度大于条的宽度，那么每个制表符宽度的大小应该相同。 （如果你使用chrome/firefox打开10-20个标签，你会明白我的意思）

有没有简单的方法来做到这一点，而不使用JavaScript？我想到的唯一解决方案是使用javascript获取条的内部宽度，并获取其他选项卡的宽度并将其总结起来。如果总和较高，那么我可以调整每个标签。

我可以实现这个解决方案，但我担心这将很难确保跨浏览器的兼容性。有没有更简单的方法来实现这一点？

由于提前，

Answer 1

你并不需要的JavaScript，只要你可以依靠CSS算法适应宽度对其内容：在表格布局算法:)

例子可见从我previous answerhttp://jsfiddle.net/r9yrM/1/。

不要忘了在每个“单元格”上都有一个最小填充，文本粘在边框上的可读性不好（并且很难看）。使用JS，你可以决定最大数量的选项卡（或最小“合理”宽度）和高于（低于）该数字，在父级上添加一个类，将触发每个选项卡呈现为float: left和block而不是table-cell了。然后，它会占用2条以上的线路（如扩展的Firefox 标签Mix Plus的）

Answer 2

在渲染后，您可以调整nav nav-tabs li元素的宽度。

计算在正常大小的父元素中适合的标签数量，并将每个标签按每个标签超过最大数量的单个标签宽度的百分比缩小。

Answer 3

我试图在今天解决同样的问题......也许我的解决方案可以帮助你多一点：http://www.da3x.de/blog/flexible-tab-panel-with-overlapping-elements/

它只使用HTML + CSS ...到目前为止没有JS。但我想我需要一些JS来对浏览器窗口的实际宽度做出反应。