html ul li - tabs

Question

Me estoy rascando la cabeza aquí por algo que pensé que podría ser tan simple.

Tengo una pestaña creada con elementos ul/li.

Supongamos que tengo el siguiente:

• Tab1
• Sep2
• Tab3
• TAB4

Las pestañas obtiene visualizan horizontalmente como:

Tab1 Sep2 Tab 3

Tab4

Hay un ancho fijo, por lo que se desborda horizontalmente.

Lo que me gustaría tener es la fila que tiene el menor número de fichas para estar en la cima de esta manera:

TAB4

Tab1 Sep2 Tab3

¿Cómo puedo lograr esto?

Muchas gracias de antemano

Answer 1

no creo que pueda, ya que no está utilizando ningún "filas". Es simplemente texto que se envía a la siguiente línea.

Si sus pestañas provienen de una base de datos, puede procesarlas usando PHP, ordenándolas mediante una matriz, pero igual necesitará otra forma de mostrarlas. Una tabla puede ser una buena alternativa (en este caso, de todos modos).

Answer 2

no debo tener entiendo su pregunta con claridad, pero que parece tratar de separar el elemento última pestaña li de otros elementos Li:

Esto se puede hacer usando:

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

y perpending última li para convertirse en primer lugar, usar jQuery como:

$(function(){ 

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

}); 

Answer 3

Usted puede escribir así:

HTML

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

CSS

li + li{ 
    float:left; 
} 

Marque esta http://jsfiddle.net/mxgNT/

Answer 4

No sé qué tipo de idioma que desea utilizar para lograr esto, pero aquí es la jQuery solución:

EJEMPLO VIVO:http://jsfiddle.net/gzZ6C/1/

jQuery

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

ACTUALIZACIÓN: se ha añadido los estilos de flotación

Answer 5

puede sonar un poco confuso a primera vista. Pero no es muy difícil.

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*/} 
​ 

demostración en vivo:

http://jsfiddle.net/f6GEp/

Answer 6

Muchas gracias por todas las respuestas chicos. Pero tal vez mi pregunta no estaba clara. También soy nuevo en stack-overflow.com así que por favor tómenlo fácil :)

De todos modos, lo que hice anoche para resolver este problema fue usar jQuery, eliminar las pestañas actuales y volver a crearlas, pero esta vez agregue un número fijo de list-item/tabs por ul/row. Si hay más que el número fijo por pestaña, cree un nuevo elemento ul para ellos. Cada elemento UL será como una nueva fila

es mi javascript Aquí/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

Sin mirar a su estilo css pestañas es difícil de decir. Pero considere usar alguna interfaz con pestañas de algunos marcos, como pestañas de arranque, pestañas de fundación o pestañas de jQuery ui. Si buscas una solución con pestañas con capacidad de respuesta premium, mira las pestañas zozo, que tienen muchos ejemplos.

http://zozoui.com/tabs

aplausos

FariDesign