एचटीएमएल उल ली - टैब

Question

मैं अपने सिर को यहां कुछ ऐसा करने के लिए खरोंच कर रहा हूं जो मैंने सोचा था कि इतना आसान हो सकता है।

मेरे पास ul/li तत्वों का उपयोग करके बनाए गए टैब हैं। की तरह क्षैतिज रूप से प्रदर्शित हो जाता है

• tab1
• Tab2
• Tab3
• tab4

टैब:

tab1 Tab2 टैब 3

मान लीजिए मैं निम्नलिखित है

टैब 4

एक निश्चित चौड़ाई है, इसलिए यह क्षैतिज रूप से बहती है।

मैं करना चाहते हैं क्या टैब की सबसे कम संख्या के साथ पंक्ति इस तरह शीर्ष पर होना करने के लिए है:

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

आप इस प्रकार लिख सकते हैं:

एचटीएमएल

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

सीएसएस

li + li{ 
    float:left; 
} 

चेक इस http://jsfiddle.net/mxgNT/

Answer 4

मैं नहीं जानता कि आप यह पूरा करने के लिए उपयोग करना चाहते भाषा किस प्रकार, लेकिन यहाँ है jQuery समाधान:

LIVE उदाहरण:http://jsfiddle.net/gzZ6C/1/

jQuery

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

अद्यतन:

Answer 5

जोड़ा नाव शैलियों पहली नजर में एक छोटे से भ्रामक लग सकता है। लेकिन बहुत मुश्किल नहीं है।

सीएसएस:

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

सभी प्रतिक्रियाओं लोगों के लिए बहुत धन्यवाद। लेकिन शायद मेरा सवाल स्पष्ट नहीं था। इसके अलावा मैं stack-overflow.com के लिए नया हूं इसलिए कृपया मुझे आसान बनाएं :)

वैसे भी, मैंने इस समस्या को हल करने के लिए कल रात क्या किया था, jQuery का उपयोग कर रहा था, वर्तमान टैब हटाएं और उन्हें फिर से बनाएं - लेकिन इस बार प्रति उल/पंक्ति प्रति सूची-आइटम/टैब की एक निश्चित संख्या जोड़ें। यदि प्रति टैब निश्चित संख्या से अधिक हैं, तो उनके लिए एक नया उल तत्व बनाएं। प्रत्येक यूएल तत्व/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

अपने टैब सीएसएस शैली में अपनी मुश्किल बताने के लिए देख के बिना एक नई पंक्ति

यहाँ मेरी जावास्क्रिप्ट है की तरह होगा। लेकिन बूटस्ट्रैप टैब, नींव टैब या jQuery UI टैब जैसे कुछ ढांचे से कुछ टैबबंद इंटरफ़ेस का उपयोग करने पर विचार करें। यदि आपके लिए प्रीमियम उत्तरदायी टैबबड समाधान के लिए, ज़ोजो टैब देखें, जिसमें बहुत से उदाहरण हैं।

http://zozoui.com/tabs

चियर्स

FariDesign