html ul li - tabs

Question

Я почесываю голову здесь, чтобы что-то, что я думал, было так просто.

У меня есть вкладки, созданные с использованием элементов ul/li.

Предположим, у меня есть следующие:

• Tab1
• Таб2
• TAB3
• tab4

Вкладки получает отображается горизонтально, как:

Tab1 TAB2 Tab 3

Tab4

Существует фиксированная ширина, поэтому она переполняется горизонтально.

Что я хотел бы иметь это строка с наименьшим количеством вкладок, чтобы быть на вершине, как это:

tab4

Tab1 TAB2 TAB3

Как я могу это сделать?

Большое спасибо заранее

Answer 1

Я не думаю, что вы можете, так как вы не используете «строк». Это просто текст, который подталкивается к следующей строке.

Если ваши вкладки взяты из базы данных, вы можете обрабатывать их с помощью PHP, заказывая их с помощью массива, но вам все равно потребуется другой способ их отображения. Таблица может быть хорошей альтернативой (в этом случае в любом случае).

Answer 2

Я не должен иметь понять ваш вопрос ясно, но вы, кажется, пытается выделить элемент последней вкладке Ли из других элементов Li:

Это может быть сделано с помощью:

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

и perpending последний Ли, чтобы стать первым, использовать JQuery как:

$(function(){ 

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

}); 

Answer 3

Вы можете написать так:

HTML

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

CSS

li + li{ 
    float:left; 
} 

Проверить это http://jsfiddle.net/mxgNT/

Answer 4

Я не знаю, какой тип языка, который вы хотите использовать для достижения этой цели, но вот jQuery раствор:

ЖИВОЙ ПРИМЕР:http://jsfiddle.net/gzZ6C/1/

JQuery

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

UPDATE: добавлены стили флоат

Answer 5

Может показаться немного запутанным на первый взгляд. Но не слишком сложно.

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

Демо:

http://jsfiddle.net/f6GEp/

Answer 6

Большое спасибо за все ответы, ребята. Но, может быть, мой вопрос не был ясен. Также я новичок в stackoverflow.com, поэтому, пожалуйста, успокойтесь на мне :)

В любом случае, что я сделал вчера вечером, чтобы решить эту проблему, было использование jQuery, удаление текущих вкладок и их повторное создание - но на этот раз добавьте фиксированное количество элементов списка/вкладок на ul/row. Если на вкладке больше фиксированного числа, создайте для них новый элемент ul. Каждый элемент UL будет как новый ряд

Вот мой 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

Не смотря на свой стиль CSS лапок его трудно сказать. Но рассмотрите возможность использования некоторого интерфейса с вкладками из некоторых фреймворков, таких как вкладки начальной загрузки, вкладки фундамента или вкладки jQuery ui. Если вы используете премиум-приложение с вкладками, посмотрите на вкладки zozo, в которых есть много примеров.

http://zozoui.com/tabs

веселит

FariDesign