可変数のタブを持つを作成しようとしてい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 を使用して簡単に実行できる場合は、アイデアも聞きますか?
助けてくれてありがとう!