CSS拆封的div比其父

Question

我建立在CSS標籤欄寬，並希望它能夠處理比可以在屏幕上顯示更多的標籤。我的HTML大致結構：

<div id="tabbar"> 
    <div id="tablist"></div> 
</div> 

CSS：

#tabbar  {position:absolute;width:100%;height:24px;overflow:hidden;} 
#tablist {position:absolute;top:0px;left:0px;height:24px;} 
div.tab  {float:left;} 

與插入#tablist所有選項卡。只要沒有足夠的選項卡，它們不會溢出，#tablist會正確收縮，我可以獲得它們的集體寬度。但是，只要屏幕上顯示的內容超過了它們，就會換行到下一行（儘管由於＃tabbar的overflow：hidden，你看不到它），並且＃tablist的寬度不再準確地代表標籤的總寬度。

我可以通過JavaScript手動設置＃Tablist中的寬度，增加每個選項卡的總寬度，但這似乎一個非常雜亂且容易出錯的方法。我也可以使用表格，但我寧可不要，因爲它違反了整個CSS佈局理論。

我在尋找，在本質上是什麼，是拆封圍繞其內容的DIV沒有它的內容被包裹到第二行由於div的父的寬度的方法。

編輯：這個的目的是建立一個標籤欄，允許用戶滾動時，有太多的選項卡，但爲了做到這一點，我需要知道何時寬度的#tablist，或總寬度所有制表符的寬度大於#tabbar的寬度，以便我可以激活'向右滾動'按鈕。我還需要知道確切的寬度，而不僅僅是寬度的事實，以便我知道應該能夠滾動多少。

Answer 1

據我瞭解，你要保留，即使他們沒有在屏幕上顯示在一行的標籤，也許你會滾動呢？我可能是錯的，但如果我是正確的 - 你可以簡單地在#tablist上設置一個足夠大的寬度來浮動所有的標籤，然後隱藏父項（#tabbar）overflow：hidden。

#tablist {width: 10000px}