我目前正在使用 jquery ui 标签,但我在标签的 css 方面遇到了一些问题。我尝试弄乱宽度,但它在不同的浏览器中中断。是否可以为选项卡的导航菜单设置自动宽度?例子
CSS
#page-wrap { width: 750px; background:#FFF; margin: 10px auto; margin: 0; padding: 0; }
.ui-tabs { zoom: 1;}
.ui-tabs .ui-tabs-nav { list-style: none; position: relative; overflow:hidden; z-index: 1000; background: #EBEBEB; margin: 0; padding: 0;}
.ui-tabs .ui-tabs-nav li { position: relative; float: left; border-bottom-width: 0 !important; margin: 0 0px -1px 0; background: #EBEBEB;}
.ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none; padding: 5px 10px ; outline: medium none; font-weight: bold; font-size:11px; line-height: 30px;}
.ui-tabs .ui-tabs-nav
li.ui-tabs-selected { border-bottom-width: 0; background: #F9AE5C; border-top:1px solid #D4D4D4; border-left:1px solid #D4D4D4; border-right:1px solid #D4D4D4; border-bottom:1px solid #FFF; }
.ui-tabs .ui-tabs-nav li a,
.ui-tabs.ui-tabs-collapsible
.ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; color: #222222; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel { padding: 20px; display: block; border-width: 0; background: none; position: relative; min-height: 100px; border: 1px solid #D4D4D4; }
.ui-tabs .ui-tabs-hide { display: none !important; margin: 0; padding: 0;}