2012-09-10 24 views
7

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?

enter image description here

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:

enter image description here

Quando rifuggo schermo, le pause menu alle linee multiple con l'ultimo elemento di riempimento della larghezza residua:

enter image description here

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.

enter image description here

Così il divario vicino al elemento "quattro" deve essere chiuso

enter image description here

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!

+0

Vuoi essere a posto con l'utilizzo di alcuni JavaScript? – Chris

+0

sì, credo. Vai avanti. – frequent

risposta

1

La prima cosa che mi viene in mente è che dal momento che si sta già impostando il .test div a display: table, forse impostare il .test .element a display: table-cell. Ciò li manterrà tutti nella stessa riga e si espanderà al 100%. L'unica cosa è che < IE8 non gestisce display: table-cell, ma ci sono soluzioni intorno a questo. Uno è here. Non sono sicuro che questo realizzi esattamente ciò che desideri, ma è una possibilità. Terrò il mio subconscio a pensarci comunque. Buona domanda!

fiddle

+0

no. Già provato L'impostazione 'display: table-cell' elimina l'elemento' .last'. Non è più in linea con gli altri elementi, più la sua larghezza e altezza sono incasinati. Non ho idea del perché comunque. – frequent

+0

Avrei pensato che un altro div all'interno di '.test' impostato su' display: table-row' dovrebbe fare il trucco, se si rimuovono le dichiarazioni di larghezza sugli elementi 'table-cell'. – DaveP

+0

È un risultato del tuo 'float: left' sugli elementi e' float: none' su '.last'? Non ho questo effetto sul violino. (anche senza un wrapper div 'table-row') – Scrimothy

1

Si può fare questo con un semplice <table> con larghezza di 100% come;

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

e in CSS come;

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

Here è il Demo Live.

+0

grazie. ma non è nemmeno "fragile" in più righe, vero? Vedi la mia modifica sopra. – frequent

1

Se è possibile utilizzare Javascript e jQuery c'è una soluzione.

check this Demo

Personalmente non credo che questa sia la soluzione migliore, ma può essere può aiutare a anche questa demo è disposto a lavorare per solo 2 righe

+0

grazie per il jsbin. L'ho provato, ma non funziona davvero. La larghezza è impostata, ma sto cercando un modo per espandere gli elementi per coprire l'intera larghezza dello schermo QUANDO i div si spezzano in più linee. Coprire lo schermo su un'unica "linea" non è un problema. Una volta che si rompe in più righe, diventa complicato. – frequent

+0

Ho modificato la demo Riprovare http://jsbin.com/ahomiw/14/edit – Champ

1

Se si desidera mantenere in una riga e usando tutto lo spazio che hanno, indipendentemente da quanti elementi hai, usando display: table, table-row e table-cell è la soluzione reale. Ma devi usarli tutti e 3 per farlo funzionare. Quindi, quello che vi serve è

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

e poi in css

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

che è tutta la magia. Quindi le tue cellule usano sempre lo spazio completo.

Se si desidera che la funzionalità di più linee, è necessario utilizzare un po 'di Javascript per verificare la vostra finestra con e poi li Sperate in due liste rendendo

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

Vero: questo è possibile con Javascript/Jquery, ma avevo sperato di cavarmela senza. Basta prendere lo spazio disponibile può essere fatto in molti modi (sto anche facendo display: tabella), ma gestendo "interruzioni di linea" ... non ho visto o sentito se questo è possibile solo con i CSS. Avrebbe bisogno di qualcosa come "larghezza massima: autoespansione" ... – frequent

+0

Per quanto ne so, non è possibile utilizzare lo spazio completo con un'interruzione di riga flessibile, mi spiace. Potresti semplicemente far sembrare che userebbe tutto lo spazio usando un'immagine di sfondo che prende il resto dello spazio ma non sarebbe lo stesso anche se –

Problemi correlati