html ul li - tabs

Question

Ich kratze meinen Kopf hier für etwas, das ich dachte, könnte so einfach sein.

Ich habe eine Tabs erstellt mit ul/li Elemente.

glaube, ich habe folgende:

• Tab1
• Tab2
• Tab3
• Tab4

Die Tabs angezeigt wird horizontal wie:

Tab1 Tab2 Tab 3

Tab4

Es gibt eine feste Breite, so dass es horizontal überläuft.

Was möchte ich haben mag, ist die Zeile mit dem niedrigsten Anzahl von Tabs wie dies an der Spitze zu sein:

Tab4

Tab1 Tab2 Tab3

Wie kann ich das erreichen?

Vielen Dank im Voraus

Answer 1

Ich glaube nicht, können Sie, da Sie „Zeilen“ nicht verwenden. Es ist einfach Text, der in die nächste Zeile geschoben wird.

Wenn Ihre Registerkarten aus einer Datenbank stammen, können Sie sie mit PHP verarbeiten, indem Sie sie mit einem Array anordnen. Sie benötigen jedoch eine andere Möglichkeit, sie anzuzeigen. Eine Tabelle kann eine gute Alternative sein (in diesem Fall sowieso).

Answer 2

ich Ihre Frage eindeutig nicht haben müssen verstehen, aber man scheint versuchen, die letzten Reiter li Element von anderen li Elemente zu trennen:

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

und perpending zuletzt: kann

mit erfolgen Diese li zum ersten werden, verwenden Sie jQuery als:

$(function(){ 

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

}); 

Answer 3

Sie können wie folgt schreiben:

HTML

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

CSS

li + li{ 
    float:left; 
} 

prüfen diese http://jsfiddle.net/mxgNT/

Answer 4

Ich weiß nicht, welche Art von Sprache, die Sie diese verwenden möchten, zu erreichen, aber hier ist die jQuery Lösung:

anschauliches Beispiel:http://jsfiddle.net/gzZ6C/1/

jQuery

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

UPDATE: hinzugefügt, um die Schwimmer Arten

Answer 5

kann ein wenig verwirrend auf den ersten Blick klingen. Aber nicht zu schwierig.

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

Vielen Dank für alle Antworten Jungs. Aber vielleicht war meine Frage nicht klar. Auch ich bin neu zu stack-overflow.com also bitte nehmen Sie es einfach auf mich :)

Wie auch immer, was ich letzte Nacht getan habe, um dieses Problem zu lösen, war mit jQuery, entfernen Sie die aktuellen Tabs und neu erstellen - aber Dieses Mal fügen Sie eine feste Anzahl von Listenelementen/Tabs pro ul/Zeile hinzu. Wenn mehr als die festgelegte Anzahl pro Registerkarte vorhanden ist, erstellen Sie ein neues ul-Element für sie. Jedes UL Element wird wie eine neue Zeile sein

Hier ist mein 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

Ohne auf Ihre Tabs css Stil seiner schwierigen Suche zu erzählen. Aber denken Sie daran, einige Tabbed-Schnittstellen von einigen Frameworks wie Bootstrap-Tabs, Foundation Tabs oder jQuery-Tabs zu verwenden. Wenn Sie für eine Premium-reaktionsschnelle Lösung mit Registerkarten suchen, werfen Sie einen Blick auf zozo tabs, die viele Beispiele enthält.

http://zozoui.com/tabs

prost

FariDesign