Question

好的，这是我的基本设置：

<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％。因此，标签左右移动的问题是，初始视图中不存在的标签会移动到它们下方并且永远不会被看到。我用萤火虫找出它们的位置。任何帮助都是如何保持它们内联的。

Answer 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;
}

jquery滚动和CSS帮助

1 个答案: