jquery滚动和CSS帮助

时间:2009-11-09 02:56:35

标签: jquery css scroll

好的,这是我的基本设置:

<ul id="sortable_tabs">
     <li id="tabs_sort" class="tab_link">
          <div id="sort_tabs" class="tab_link_text">Text here</div>
          <div id="close_tab" class="close_tab">
               <img class="close_image" src="css/images/close.png" />
          </div>
     </li>
</ul>

这些基本上是带有文字和近距离图像的标签。这是我的css

#sortable_tabs {
    display:inline;
    list-style-type: none;
    margin:0;
    min-width:20px;
    max-width:80%;
    height:35px;
    float:left;
    overflow:hidden;
}

#tab_links {
    margin-left: 5px;
    height: 35px;
}

.tab_link {
    width: 110px;
    text-align: center;
    float:left;
    height: 35px;
}

.tab_link_text {
    cursor:default;
    float:left;
    width:80px;
}

.close_tab {
    width: 20px;
    float: left;
}

现在我要做的是创建按钮,从左到右滚动它们,我已经用这段代码完成了:

$(".tab_link").each(function(){
    $(this).css("position","relative");
    $(this).animate({"left": "-=100px"});
});

现在的问题是,一旦标签超过了80%,他们跳到下一行,我不明白。我将溢出设置为隐藏,显示内联,高度设置为35px,这是选项卡的大小。我需要它设置为80%,因为它旁边有链接将占用另外20%。因此,标签左右移动的问题是,初始视图中不存在的标签会移动到它们下方并且永远不会被看到。我用萤火虫找出它们的位置。任何帮助都是如何保持它们内联的。

1 个答案:

答案 0 :(得分:1)

解决此问题的常用方法(不确定它是否是唯一的解决方案)是将内部元素设置为选项卡的整个宽度。您可以通过添加选项卡宽度,边距和填充来通过JS执行此操作,或者您可以设置表示最大可能选项卡大小的CSS大小。

编辑:重写为使用包装器DIV)

<div id="sortable_tabs_wrapper">
    <ul id="sortable_tabs">
         <li id="tabs_sort" class="tab_link">
              <div id="sort_tabs" class="tab_link_text">Text here</div>
              <div id="close_tab" class="close_tab">
                   <img class="close_image" src="css/images/close.png" />
              </div>
         </li>
    </ul>
</div>

#sortable_tabs_wrapper {
    min-width:20px;
    max-width:80%;
    height:35px;
    overflow:hidden;
}

#sortable_tabs {
    list-style-type: none;
    margin:0;
    width:2000px;
    height:35px;
    float:left;
}