मेरे पास टैब के लिए निम्न सीएसएस है,

.columbia-browser-blackberry .ui-tabs .ui-tabs-nav li a, .columbia-browser-  
chrome .ui-tabs .ui-tabs-nav li a, .columbia-browser-iemobile .ui-tabs .ui-
tabs-nav li a, .columbia-browser-safari .ui-tabs .ui-tabs-nav li a, 
.columbia-browser-moz.ui-tabs .ui-tabs-nav li a
{
    padding: .5em 1em;
    width: 225px;
    word-wrap: initial;
    height: 25px;
    text-align: center;
    display: inline;
}

एचटीएमएल

/**
* Page Tabs Control
* @TODO guerrics: overflowing tabs
*
* @param array pages - array of pages (default: map.values(page.subpages))
* @param str tab - name of the selected tab (default: __request.args.tab)
*/
var pages = $pages ?? map.values(page.subpages);
let pages = [ (p is str) ? wiki.getpage(p) : p foreach var p in pages];
var selectedTab = $tab ?? __request.args.tab;

// find the active tab page
var activeTab = [ tabpage foreach var tabpage in pages where tabpage.name ==      
selectedTab ][0];

// no selected tab found, use first tab
if (!activeTab) {
let activeTab = pages[0];
}
<div class="mt-tabs ui-tabs ui-widget ui-widget-content ui-corner-all"    
id="tabs">
    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-  
header ui-corner-all">
        foreach(var tabpage in pages) {
            <li id=('tab-'..tabpage.name) class=('ui-state-default ui-
corner-top'..(tabpage.name == activeTab.name ? " ui-tabs-selected ui-state-
active " : ""))>
                <a href=(page.uri & {tab: tabpage.name})>
                    tabpage.title ?? "#" .. (__count + 1)
                </a><span></span>
            </li>
        }
    </ul>
    <div class=("ui-tabs-panel ui-widget-content ui-corner-bottom"..(#pages 
 > 0 ? "" : "ui-state-empty"))>
        if (activeTab) {
            var contents = activeTab.contents;
            if (contents) {
                contents;
            } else {
                wiki.page(activeTab.path);
            }
        }
    </div>
</div>

यह Google क्रोम के लिए काम करता है, लेकिन यह मोज़िला और इंटरनेट एक्सप्लोरर में काम नहीं करता है। मैं टैब को 225px की एक समान चौड़ाई देने का प्रयास कर रहा हूं।

किसी भी सहायता की सराहना की जाएगी?

css
0
PMM 17 जून 2016, 08:26

2 जवाब

सबसे बढ़िया उत्तर

इस तरह इसने काम किया।

  body .ui-tabs .ui-tabs-nav li a 
  {
   padding: .5em 1em;
   width:225px;
   word-wrap: initial;
   height: 25px;
   text-align: center;
   display: inline-block;
  } 
0
PMM 28 जून 2016, 07:46

चौड़ाई लागू करने के लिए, css प्रॉपर्टी 'डिस्प्ले' को 'ब्लॉक' या 'इनलाइन-ब्लॉक' पर सेट करें।

ब्लॉक: तत्व एक ही पंक्ति में बैठेगा। ऐसे मामले में आप फ्लोट सेट करना चाह सकते हैं ताकि लिंक एक ही पंक्ति में हों;

इनलाइन-ब्लॉक; तत्व की ऊंचाई, चौड़ाई आदि होगी, और कई तत्व एक ही पंक्ति (ब्लॉक) में बैठेंगे।

इसके साथ प्रयास करें:

display:inline-block
1
Rohit Goyani 17 जून 2016, 08:44