代码之家 › 专栏 › 技术社区 › opensas

HTML可滚动选项卡栏-在下一行溢出屏幕时使td继续

simpletabcontrol overflow tabcontrol scrollbar html

1

opensas · 技术社区 · 15 年前

我想实现的是一个可滚动的标签栏。

我有一个有多个标签的网页。

“tab”控件只是一个HTML表,只有一行,其中每个选项卡都是一个td。

页面有超过10个选项卡,这些选项卡不再适合屏幕。

我想让标签滚动,或者至少在下一行继续(类似于自动换行效果)

或者其他任何方式,以便有尽可能多的标签,而不必担心屏幕大小…

谢谢

萨卢多斯

SAS

附言:也许我应该用一张桌子,而不是一个段落,每个标签并排…

2 回复 | 直到 15 年前

1

2

Keltex 15 年前

我认为实现你想要的更好的选择是把每个标签放在 div 标签(或其他标签)。然后 float:left 当浏览器窗口太窄时,每个分区都会自动换行。

像这样:

<div id='mytabs'>
  <div class='tab'>Tab 1</div>
  <div class='tab'>Tab 2</div>
  <div class='tab'>Tab 3</div>
  <div class='tab'>Tab 4</div>
  .. etc
  <div style='clear:both'></div>
</div>

然后在样式表中:

#mytabs .tab
{
  float:left;
  width:100px; // assuming fixed width tabs
  // other formatting
}

2

0

opensas 15 年前

我刚找到这个

<div style="overflow:auto; width:100%">
<table border="1" >
  <tr>
    <td>10000000000000000000000000000000000</td>
    <td>10000000000000000000000000000000000</td>
    <td>10000000000000000000000000000000000</td>
    <td>10000000000000000000000000000000000</td>
    <td>10000000000000000000000000000000000</td>
  </tr>
</table>
</div>

似乎它可以工作…