6

我在这里为一些我认为可能如此简单的事情挠头。

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

假设我有以下内容：

  • 选项卡1
  • 选项卡2
  • Tab3
  • Tab4

选项卡水平显示，如下所示：

选项卡 1 选项卡 2 选项卡 3

Tab4

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

我想要的是标签数量最少的行位于顶部，如下所示：

Tab4

选项卡 1 选项卡 2 选项卡 3

我怎样才能做到这一点？

提前谢谢了

4

7 回答 7

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();
}
于 2012-05-23T12:10:54.573 回答
0

乍一看可能听起来有点混乱。但也不是太难。

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/

于 2012-05-22T11:12:26.233 回答
0

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

现场示例：http: //jsfiddle.net/gzZ6C/1/

jQuery

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

更新：添加了浮动样式

于 2012-05-22T10:56:47.287 回答
0

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

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

于 2012-05-22T10:35:10.450 回答
0

你可以这样写：

HTML

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

CSS

li + li{
    float:left;
}

检查这个http://jsfiddle.net/mxgNT/

于 2012-05-22T10:49:43.473 回答
0

如果不查看您的标签 css 样式，则很难分辨。但是考虑使用一些框架的选项卡式界面，如引导选项卡、基础选项卡或 jQuery ui 选项卡。如果您需要高级响应式选项卡式解决方案，请查看 zozo tabs，其中有很多示例。

http://zozoui.c​​om/tabs

干杯

法里设计

于 2013-11-04T13:26:28.500 回答
0

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

这可以使用以下方法完成：

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

并将最后一个 li 设为第一个，使用 jQuery 作为：

$(function(){

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

});
于 2012-05-22T10:46:59.140 回答