如何使水平元素擴大以覆蓋可用空間？

Question

我試圖創建一個CSS fluid tab menu，具有可變數量的選項卡（類似於在Windows中可以看到的選項卡，其中根據包含的標題的長度進行擴展，請參見下文）。

下面是一個例子，我有安裝（我需要保持元素結構）：

<div class="test"> 
    <div class="element"> 
     <h3> 
      <span class="dummy-a"> 
       <span class="dummy-ui-btn-inner"> 
        <span class="dummy-ui-btn-text">very long text is this</span> 
       </span> 
      </span> 
     </h3> 
    </div> 
    <div class="element"> 
     <h3> 
      <span class="dummy-a"> 
       <span class="dummy-ui-btn-inner"> 
        <span class="dummy-ui-btn-text">Two</span> 
       </span> 
      </span> 
     </h3> 
    </div> 
    <div class="element"> 
     <h3> 
      <span class="dummy-a"> 
       <span class="dummy-ui-btn-inner"> 
        <span class="dummy-ui-btn-text">Three</span> 
       </span> 
      </span> 
     </h3> 
    </div> 
    <div class="element"> 
     <h3> 
      <span class="dummy-a"> 
       <span class="dummy-ui-btn-inner"> 
        <span class="dummy-ui-btn-text">Four</span> 
       </span> 
      </span> 
     </h3> 
    </div> 
    <div class="element"> 
     <h3> 
      <span class="dummy-a"> 
       <span class="dummy-ui-btn-inner"> 
        <span class="dummy-ui-btn-text">Five</span> 
       </span> 
      </span> 
     </h3> 
    </div> 
</div> 

和CSS：

.test { width: 100%; display: table; } 
.test .element { border: 1px solid red; float: left; min-width: 19%; } 
.test .element.prelast { border: 1px solid green; } 
.test .element.last { float: none !important; overflow: hidden; } 
.test .element h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 

這將創建下列內容：

當我縮小屏幕，菜單休息多行與最後一個元素填充剩餘寬度：

我的問題是擴大的要素中的「第一排」覆蓋可用空間一次菜單中斷。簡單地設置min-width: 19%就是問題，但我無法獲得任何工作。

問題：
我將如何讓元素「行」（這是不是一個真正的行，如果把它分成多行）佔用僅使用CSS的所有可用空間？

編輯：
Here是顯示我的意思採樣頁面。縮小瀏覽器窗口並查看元素的行爲。我正在尋找一種方法來使第一行在完成寬度後展開爲多行。

UPDATE：
我更新了示例頁面。見here。我不會在擴展元素時遇到任何問題，但它們都是「一行」。當行「分解」成多行時，問題就開始了。我想知道是否有可能通過在屏幕上展開所有元素來填補右上方的空白。

這裏有兩個額外的屏幕截圖。

所以旁邊的元素的差距「四」需要關閉

現在的差距旁邊的元素「三公」需要關閉。你可以看到它在設置元素「Four」時不起作用，因爲它不會始終位於右上角位置。相反，它應該是我設置所有元素的CSS規則（我猜）。

此外，如果這可以很容易地使用JavaScript/JQuery的，我也會聽取想法？

感謝您的幫助！

Answer 1

我能想到的第一件事情是，由於您已將.test div設置爲display: table，因此可能會將.test .element設置爲display: table-cell。這將使他們保持在同一行，並擴大到100％。唯一的一點是，< IE8不處理display: table-cell，但也有解決這個解決方案。一個是here。我不確定這是否真的實現了你想要的，但這是一種可能性。儘管如此，我會保持我的潛意識思考。好問題！

fiddle

Answer 2

您可能只用100％等的具有寬度<table>這樣做;

<table class="menu" cellpadding="0" cellspacing="0"> 
<tr> 
<td>menu1</td> 
<td>menu2</td> 
<td>menu3</td> 
<td>menu4</td> 
<td>menu5</td> 
</tr> 
</table> 

和CSS樣;

.menu{ 
    width: 100%; 
} 
.menu tr td{ 
    height: 20px; 
    background: gray; 
    cursor: pointer; 
    text-align: center; 
} 
.menu tr td:hover{ 
    background: white; 
} 

Here是現場演示。

Answer 3

如果你可以使用Javascript和jQuery的有一個解決方案。

check this Demo

個人而言，我不認爲這是最好的解決方案，但可能是它可以幫助你 也是這個演示準備僅爲2行

Answer 4

如果您想保留工作他們在一行中，並使用他們擁有的所有空間，無論您擁有多少物品，使用display：table，table-row和table-cell都是實際的解決方案。但是你必須全部使用它們才能使其工作。所以，你需要的是

<div class="menu"> 
    <ul> <!-- Menus should usually be Lists if it's your choice --> 
     <li>One</li> 
     <li>Two</li> 
     <li>Three</li> 
     <li>Four</li> 
     <li>Five</li> 
    </ul> 
</div> 

，然後在CSS

.menu { display: table; width: 100%; } 
.menu ul { display: table-row; width: 100%; } 
.menu ul li { display: table-cell; } 

這一切的魔力。所以你的細胞總是使用整個空間。

如果你想的多條線路的功能，你必須使用一些JavaScript來檢查你的窗口，然後sperate他們兩個列表使它

<div class="menu"> 
    <ul> 
     <li>One</li> 
     <li>Two</li> 
     <li>Three</li> 
     <li>Four</li> 
    </ul> 
    <ul> 
     <li>Five</li> 
    </ul> 
</div>