6

私はここで頭を悩ませています。

ul/li 要素を使用して作成されたタブがあります。

次のものがあるとします。

  • タブ1
  • タブ 2
  • タブ3
  • タブ4

タブは次のように水平に表示されます。

タブ1 タブ2 タブ3

タブ4

固定幅があるので、横にはみ出します。

私がしたいのは、このように一番上にあるタブの数が最も少ない行です:

タブ4

タブ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

あなたはこのように書くことができます：

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:

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');
});

更新: float スタイルを追加しました

于 2012-05-22T10:56:47.287 に答える
0

「行」を使用していないので、できないと思います。次の行にプッシュされるのは単なるテキストです。

タブがデータベースから取得されたものである場合は、PHP を使用してそれらを処理し、配列を使用してそれらを並べ替えることができますが、それらを表示するには別の方法が必要です。テーブルは良い代替手段かもしれません (この場合はともかく)。

于 2012-05-22T10:35:10.450 に答える
0

私はあなたの質問を明確に理解していなかったに違いありませんが、最後のタブの 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 に答える
0

タブのCSSスタイルを見ないと、わかりにくいです。ただし、ブートストラップ タブ、ファウンデーション タブ、jQuery ui タブなど、一部のフレームワークのタブ付きインターフェイスを使用することを検討してください。プレミアムなレスポンシブ タブ ソリューションが必要な場合は、zozo タブをご覧ください。多くの例があります。

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

乾杯

ファリデザイン

于 2013-11-04T13:26:28.500 に答える