jQuery 选项卡启用水平滚动

Question

如何启用 水平滚动 在 jQuery 选项卡上的特定宽度内单行.

默认情况下，jQuery UI 插件将最后一个标签移动到下一行。

所以，我一直在使用变通方法通过如下设置 css 样式来稍微增加宽度，

#tabs_div .scroller {
  overflow: auto;
}
#tabs_div ul { 
  width: 1100px; 
}

标签设置如下，

<div id='tabs_outer_div' class="tabs">
  <div id='tabs_div' class="scroller" style='display:none;width:100%'>
   <ul>....
 </div>
</div>

编辑以包含 jsfiddle，此处选项卡显示为多行。如何将它们设置在一行（行）中。 - http://jsfiddle.net/karthikn_jay/pdnr0op9/

Answer 1

只需在您的样式 sheet 中添加自定义样式到 .ui-tabs .ui-tabs-nav 和 .ui-tabs .ui-tabs-nav li 如果需要添加父级唯一 selector

jQuery tabs enable horizontal scroll