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