Sto provando a creare un CSS fluid tab menu
, con un numero variabile di schede (simile a ciò che può essere visto in Windows, dove le schede si espandono a seconda della lunghezza dell'intestazione contenuta, vedi sotto).come ampliare gli elementi orizzontali per coprire lo spazio disponibile?
Ecco un esempio, ho setup (ho bisogno di mantenere struttura di elemento):
<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>
e 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; }
questo modo si crea la seguente:
Quando rifuggo schermo, le pause menu alle linee multiple con l'ultimo elemento di riempimento della larghezza residua:
mio problema sta espandendo gli elementi in "prima fila" per coprire lo spazio disponibile una volta il menu si interrompe. È sufficiente impostare min-width: 19%
, ma non riesco a far funzionare nulla.
Domanda:
Come dovrei fare gli elementi in una "fila" (non è proprio una riga, se si rompe in più righe) occupare tutto lo spazio disponibile utilizzando solo i CSS?
EDIT:
Here è una pagina di esempio che mostra quello che voglio dire. Riduci la finestra del browser e osserva come si comportano gli elementi. Sto cercando un modo per far espandere la prima riga a tutta larghezza DOPO la rottura in più linee.
UPDATE:
Ho aggiornato la pagina di esempio. Vedi here. Non ho problemi ad espandere gli elementi mentre sono tutti "in una riga". Il problema inizia quando la riga "si rompe" in più righe. Vorrei sapere se è possibile riempire il divario in alto a destra facendo espandere gli elementi su tutto lo schermo.
Ecco due schermate aggiuntive.
Così il divario vicino al elemento "quattro" deve essere chiuso
Ora il divario vicino al elemento "Tre" deve essere chiuso. Puoi vedere che non funziona impostando qualcosa sull'elemento "Quattro", perché non sarà sempre nella posizione in alto a destra. Piuttosto dovrebbe essere una regola CSS che sto impostando su tutti gli elementi (credo).
Inoltre, se questo può essere fatto facilmente utilizzando Javascript/Jquery, vorrei anche ascoltare le idee?
Grazie per l'aiuto!
Vuoi essere a posto con l'utilizzo di alcuni JavaScript? – Chris
sì, credo. Vai avanti. – frequent