首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在Firefox和中无法工作的选项卡宽度CSS

在Firefox和中无法工作的选项卡宽度CSS
EN

Stack Overflow用户
提问于 2016-06-17 05:26:41
回答 2查看 665关注 0票数 0

我有下面的css选项卡,

代码语言:javascript
复制
.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;
}

Html

代码语言:javascript
复制
/**
* 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,但在Mozilla和中不起作用。我试着给标签的宽度统一到225 to。

有什么需要帮忙的吗?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-06-28 04:46:39

这就是它的工作原理。

代码语言:javascript
复制
  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
EN

Stack Overflow用户

发布于 2016-06-17 05:44:10

若要应用宽度,请将css属性“显示”设置为“块”或“内联块”.

块:元素将位于一行中。在这种情况下,您可能希望设置浮动,以便链接在同一行;

内联块;元素将具有高度、宽度等,多个元素将位于同一行(块)中。

试着:

代码语言:javascript
复制
display:inline-block
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/37873713

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档