0

我有一个容器,用于在选择一系列文档时显示面包屑路径。

每个面包屑元素都是一个 div,向左浮动,这样它们就可以很好地堆叠在一起。它们的宽度由它们的文本内容设置,即文档的标题。长度会有很大差异。

应该发生什么: 当元素的面包屑列表变得太长而无法在容器中显示时,它们应该调整大小,确保所有元素在容器中保持可见。

问题: 这似乎有效,但只是在一定程度上。一旦面包屑列表对于容器来说太长,我将容器宽度除以存在的面包屑元素的数量,并相应地设置元素宽度。但是,这不会始终如一地工作,有时会显示列表中的最后一个文档,但如果选中则拒绝显示其直接父级。

理想情况下,面包屑元素应该简单地保持缩小以确保它们都显示出来,这与调整窗口图标大小以显示在 Windows 任务栏中的方式大致相同。

Iv 做了一个小动作来粗略地突出显示正在发生的事情,即使在这里你也可以看到元素没有正确调整大小以确保它们都显示出来。这在添加 8 个或更多元素时最为明显。

http://jsfiddle.net/MaxVK/drw9J/30/

谁能告诉我我做错了什么?

非常感谢

MVK

4

1 回答 1

1

您必须将填充、边距和边框大小(在您的情况下:9px,填充为 2*3,边框为 2*1,左边距为 1)减去按钮宽度:

var Lok = (BredWid / ButCount)-9;

http://jsfiddle.net/drw9J/35/

这是一个简单的例子:

http://jsfiddle.net/drw9J/34/

您会注意到总宽度不完全等于容器宽度(按钮后面有一个小空白),这是由于宽度的四舍五入造成的。

在第一个示例(您的版本)中,末尾的空白是由于按钮小于 Lok。

于 2012-06-20T11:16:07.503 回答