HTML UL LI -选项卡

Question

我正在为一件我认为很简单的事情苦思冥想。

我使用ul/li元素创建了一个选项卡。

假设我有以下内容：

Tab1 Tab2 Tab3 Tab4

选项卡水平显示如下：

Tab1 Tab2 Tab3

Tab4

它的宽度是固定的，因此会水平溢出。

我希望最少标签数的行在顶部，像这样：

Tab4

Tab1 Tab2 Tab3

我该如何实现呢？

非常感谢。

- Faizul Hussain

---

你的数据表有最大行数限制吗？ - Fabrizio Calderan

不，选项卡的数量也是动态的。 - Faizul Hussain

Answer 1

我可能没有清楚地理解你的问题，但是你似乎正在尝试将最后一个标签页 li 元素与其他 li 元素分开：

可以使用以下方法实现：

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

将最后一个li插入到第一个位置，使用jQuery代码如下：

$(function(){

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

});

- Vishal

---

我认为他的意思是，如果任何li元素显示在完整的“行”（我知道它不是真正的行）下面，并且它们自己不能形成完整的“行”，那么应该将它们放在完整的“行”之上。而不仅仅是取列表中的最后一个li元素。 - Nealbo

不是最后一项，而是在渲染完整行后的所有剩余项。 - Faizul Hussain

哦，顺便说一下，我有点淘气！而且正如你也知道的那样，这个回答无论如何都不可接受！ - Vishal

Answer 2

非常感谢大家的回复。但是也许我的问题没有表达清楚。另外，我是 stack-overflow.com 的新手，请大家多多包涵 :)

无论如何，昨晚我解决这个问题的方法是使用 jQuery，删除当前选项卡并重新创建它们 - 但这次每个 ul/行添加一个固定数量的 list-item/选项卡。如果每个选项卡超过了固定数量，则为它们创建一个新的 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();
}

- Faizul Hussain

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/

- sandeep

Answer 4

我不知道你想用什么类型的语言来完成这个任务，但是这里有一个 jQuery 的解决方案：

实时示例： http://jsfiddle.net/gzZ6C/1/

jQuery

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

更新：添加了浮动样式

- Marc Uberstein

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/

- Sinan AKYAZICI

---

是的，因为IE8及以下版本不支持CSS3选择器。http://www.quirksmode.org/css/contents.html - Sinan AKYAZICI

请不必再担心IE的支持问题了。 - Milad Rashidi

Answer 6

没有查看您的选项卡CSS样式，很难判断。但是考虑使用一些框架中的选项卡界面，例如Bootstrap选项卡、Foundation选项卡或jQuery UI选项卡。如果您需要高级响应式选项卡解决方案，请查看Zozo Tabs，其中有许多示例。

http://zozoui.com/tabs

干杯

FariDesign

- FariDesign

Answer 7

我认为你不行，因为你没有使用任何“行”。它只是被推到下一行的文本。

如果你的制表符来自数据库，你可以使用PHP处理它们，使用数组对它们进行排序，但你仍然需要另一种方式来显示它们。在这种情况下，表格可能是一个很好的选择。

- kristof_w

---

感谢您的快速回复。顺序并不重要，重要的是显示效果 - 我将尝试使用jQuery进行调整。 - Faizul Hussain