html ul li - tabs

Question

Mi sto grattando la testa per qualcosa che pensavo potesse essere così semplice.

Ho una scheda creata con gli elementi ul/li.

Supponiamo che io ho il seguente:

• Tab1
• Tab2
• Tab3
• TAB4

Le schede viene visualizzato orizzontalmente come:

Tab1 Tab2 Tab 3

Tab4

C'è una larghezza fissa, quindi si trabocca orizzontalmente.

Quello che vorrei avere è la riga con più basso numero di schede per essere al top in questo modo:

TAB4

Tab1 Tab2 Tab3

Come posso fare questo?

Molte grazie in anticipo

Answer 1

Io non credo che si possa, dal momento che non si sta usando qualsiasi "righe". È semplicemente un testo che viene inviato alla riga successiva.

Se le schede provengono da un database, è possibile elaborarle utilizzando PHP, ordinandole mediante un array, ma sarà comunque necessario un altro modo per visualizzarle. Un tavolo può essere una buona alternativa (in questo caso comunque).

Answer 2

io non devo avere capito la tua domanda in modo chiaro, ma sembra cercare di separare l'elemento ultima scheda li da altri elementi li:

questo può essere fatto utilizzando:

.tabs ul li:last-child { 
    display: block; 
} 

e perpending ultima Li per diventare prima, come utilizzare jQuery:

$(function(){ 

    $('.tabs ul').prepend($('.tabs ul').find('li:last')); 

}); 

Answer 3

Si può scrivere in questo modo:

HTML

<ul> 
    <li>test4</li> 
    <li>test1</li> 
    <li>test2</li>  
    <li>test3</li> 
</ul> 

CSS

li + li{ 
    float:left; 
} 

Scegli questa http://jsfiddle.net/mxgNT/

Answer 4

Non so che tipo di lingua che si desidera utilizzare per raggiungere questo obiettivo, ma qui è la jQuery soluzione:

ESEMPIO IN DIRETTA:http://jsfiddle.net/gzZ6C/1/

jQuery

$(function(){ 
    $('ul').prepend($('ul').find('li:last')); 
    $('ul').find('li:not(:first)').css('float','left'); 
}); 

UPDATE: aggiunti gli stili galleggiante

Answer 5

può sembrare un po 'di confusione a prima vista. Ma non troppo difficile.

css:

ul {position:relative;} 
ul li {padding:3px 10px;height:20px} 
ul li:last-child{position:absolute} 
ul li:not(:last-child) {float:left;color:green;margin-top:20px; /*height of li*/} 
​ 

Live Demo:

http://jsfiddle.net/f6GEp/

Answer 6

Molte grazie per tutte le risposte ragazzi. Ma forse la mia domanda non era chiara. Anche io sono nuovo di stack-overflow.com quindi per favore mi stia tranquillo :)

In ogni caso, quello che ho fatto ieri sera per risolvere questo problema era usare jQuery, rimuovere le schede attuali e ricrearle - ma questa volta aggiungi un numero fisso di voci di elenco/schede per ul/riga. Se ci sono più di un numero fisso per tab, allora crea un nuovo elemento ul per loro. Ogni elemento UL sarà come una nuova riga

Ecco la mia JavaScript/jQuery

// contains tab headers and contents 
var tabsContainer = $('.tabs'); 
// this is a UL element containing the tab headers 
var currentUlElement = $('.tabNavigation'); 
// this are the LI elemets which are the actual tabs 
var currentLiElements = currentUlElement.children('li'); 

// we can only have 6 tabs plus the '+' tab (total 7) in a row. 
// if there's mroe than that we need to sort the overflow 
if (currentLiElements.length > 7) { 

    // remove all current tab headers 
    currentUlElement.remove(); 

    // create new tab headers container 
    var newUlElementRow = $('<ul />'); 
    // make the list items appear like tabs 
    newUlElementRow.addClass('tabNavigation'); 
    // add the new tabs header container to the front of the main tab/content container control 
    tabsContainer.prepend(newUlElementRow); 

    for (var index = 0; index < currentLiElements.length; index++) { 

     // if one row of tabs is complete 
     if (index == 6) { 
      // create a new tab headers container 
      newUlElementRow = $('<ul />'); 
      // make the list items appear like tabs 
      newUlElementRow.addClass('tabNavigation'); 
      // add the new tabs header container to the front of the main tab/content container control 
      tabsContainer.prepend(newUlElementRow); 
     } 

     // add the tab/list item to the new tab headers container 
     newUlElementRow.append(currentLiElements.get(index)); 
    } 

    // re-enable the tab click actions 
    trackNetPeople.SetupTabs(); 
} 

Answer 7

Senza guardare il vostro stile css schede sua difficile da raccontare. Ma considera l'utilizzo di alcune interfacce a schede da alcuni framework come schede di bootstrap, schede di base o schede ui jQuery. Se siete in cerca di una soluzione a schede premium reattiva, date un'occhiata alle schede zozo, che hanno molti esempi.

http://zozoui.com/tabs

applausi

FariDesign