Question

我在这里摸不着头脑，因为我觉得这很简单。

我有一个使用ul / li元素创建的标签。

假设我有以下内容：

TAB1
TAB2
TAB3
TAB4

标签水平显示如下：

Tab1 Tab2 Tab 3

TAB4

有一个固定的宽度，所以它会水平溢出。

我想要的是具有最少数量的标签的行，如下所示：

TAB4

Tab1 Tab2 Tab3

我该如何做到这一点？

非常感谢提前

Answer 1

非常感谢所有回复的人。但也许我的问题不明确。另外我是stack-overflow.com的新手，所以请放轻松我：）

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

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

如果您的标签来自数据库，您可以使用PHP处理它们，使用数组对它们进行排序，但您仍需要另一种方式来显示它们。表可能是一个很好的选择（在这种情况下无论如何）。

Answer 3

我一定不能清楚地理解你的问题，但你似乎试图将最后一个tab li元素与其他li元素分开：

这可以使用：

完成

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

并将最后的li放在第一位，使用jQuery：

$(function(){

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

});

Answer 4

您可以这样写：

<强> 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 5

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

直播示例： http://jsfiddle.net/gzZ6C/1/

<强>的jQuery

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

更新：添加了浮动样式

Answer 6

乍一看，听起来有点令人困惑。但并不太难。

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 7

不看你的标签css风格很难分辨。但是考虑使用一些框架的标签界面，比如bootstrap标签，基础标签或jQuery ui标签。如果你是一个高级响应标签解决方案，请看一下zozo标签，其中有很多例子。

http://zozoui.com/tabs

欢呼声

FariDesign

html ul li - 制表符

7 个答案: