javascript - 使用可能なスペースをカバーするために水平要素を拡張する方法は?

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 のみを使用して、"行" (複数の行に分割されている場合、実際には行ではありません) 内の要素が利用可能なすべてのスペースを占有するようにするにはどうすればよいですか?

編集：これは
私が何を意味するかを示すサンプルページです。ブラウザー ウィンドウを縮小し、要素の動作を確認します。複数の行に分割した後、最初の行を全幅に拡張する方法を探しています。

UPDATE :サンプルページ
を更新しました。ここを参照してください。すべてが「1行」にある間、要素を展開しても問題はありません。問題は、行が複数の行に「分割」されたときに始まります。要素を画面全体に展開することで、右上のギャップを埋めることができるかどうかを知りたいです。

2 つの追加のスクリーンショットを次に示します。

したがって、要素「4」の隣のギャップを閉じる必要があります

ここで、要素「Three」の隣のギャップを閉じる必要があります。常に右上の位置にあるとは限らないため、要素「4」に何かを設定しても機能しないことがわかります。むしろ、すべての要素に設定している CSS ルールにする必要があります (推測します)。

また、これが Javascript/Jquery を使用して簡単に実行できる場合は、アイデアも聞きますか?

助けてくれてありがとう！

Answer 1

それらを1つの行に保持し、それらが持つすべてのスペースを使用する場合は、アイテムの数に関係なく、display：table、table-row、およびtable-cellを使用することが実際のソリューションです。しかし、それを機能させるには、3つすべてを使用する必要があります。だからあなたが必要なのは

<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を使用してウィンドウをチェックし、2つのリストに分割してウィンドウを作成する必要があります。

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

Answer 2

<table>これは、次のように100％の幅で行うことができます。

<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;
}

これがライブデモです。

Answer 3

Javascript と jQueryを使用できる場合は、解決策があります。

このデモをチェック

個人的には、これが最善の解決策だとは思いませんが、このデモは 2 行のみで動作するように準備されています。

Answer 4

The first thing I can think of is that since you're already setting your .test div to display: table, maybe set your .test .element to display: table-cell. This will keep them all in the same row and just expand to 100%. The only thing is that < IE8 doesn't handle display: table-cell, but there are solutions around this. One being here. I'm not sure if this really achieves exactly what you want, but it's a possibility. I'll keep my subconscious thinking about it though. Good question!

fiddle