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來對瀏覽器窗口的實際寬度做出反應。