Question

我正在开发的一个项目使用标签式导航。由于选项卡的数量是动态计算的，并且可以达到很高的数量，因此有时这些选项卡（实际上是具有<li>样式声明的float: left;元素）会溢出到下一行，使用{{ 1}}显示选项卡，最终结果如下所示：

[###]

因为顶行的最后4个元素没有他们'连接'的元素，所以这看起来很糟糕。

是否有可能在Javascript（jQuery或MooTools等框架可接受，如果它们提供更短/更简单的解决方案）的帮助下首先填写底行，并将其余元素置于顶部？

像这样：

[###] [###] [###] [###] [###] [###]
[###] [###]
[Rest of the content..............]

（问题标记为MooTools，因为它是我们目前正在使用的JS框架。在任何其他框架中给出的答案都可以，因为它可能很快被翻译成MT）

Answer 1

以下是我用来解决这个问题的代码。基本上，使用JS，我们计算容器的宽度，并与选项卡的宽度（所有选项卡具有相同的宽度）一起计算每行的选项卡数量和余数。使用简单的模数比较，我们可以插入clear: both样式（强制选项卡移动到空行）。

var allTabs = $$('#tab-container li');
var tabNum = allTabs.length;
var tabWidth = allTabs[0].offsetWidth;
var oWidth = $('tab-container').offsetWidth;
var tabRowNum = Math.floor(oWidth/tabWidth);
var tabRowOffset = (tabNum % tabRowNum);

for(var i = 0; i < tabNum; i++) {
    if((i % tabRowNum) == tabRowOffset) {
        allTabs[i].setStyle('clear', 'both');
    }
    else {
        allTabs[i].setStyle('clear', 'none');
    }
}

Answer 2

我担心没有简单的解决方案可以完全按照你的意愿行事。浮子是浮子。您最好的选择是使用javascript动态计算标签的尺寸和数量，然后使用position:absolute手动定位它们。不漂亮。

但是将大量标签放入小空间的问题是可以解决的。最简单的方法是为第二行中的选项卡提供一个额外的css类，并使用它将它们放在第一行的顶部。这可以在服务器端或客户端使用javascript完成。或者，如果您知道选项卡的确切数量和容器的确切宽度，那么您可以为它们设置max-width并让它们缩小一点。或者你可以使用overflow: scroll标签容器，但这看起来很丑陋：）

Answer 3

轻松使用JS。低于伪代码：

创建div（可选）
创建ul
用li填充它，直到达到最大数量或他们的组合宽度“正好低于”所需宽度
将div添加到您的html文档中保存对id的引用
重复，但如果您有保存的参考到保存的div，之前添加新的div 这一点。

Answer 4

我建议将所有标签保持在一行（使其尽可能宽）并滚动到当前标签。（您还需要一个下拉菜单，列出所有可用选项卡，以便进行导航。）

你要做的事情的问题是，如果你做得到你想要的，当选择顶行中的标签时会发生什么？

您有一个未连接到当前面板的选定标签（由标签的底行隔开），这很丑陋或
您将顶行标签移到底部（与面板相邻），在这种情况下，您可以避免使用或
您重新组织选项卡以将选定的选项卡放在底部，这会导致导航混乱（用户无法了解选项卡的位置）。

浮动元素：首先填写底线

4 个答案: