调整元素的大小以适合其容器

Question

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

每个面包屑元素是一个单独的div，向左浮动，以便它们很好地堆叠在另一个之后。它们的宽度由它们的文本内容设置，这是文档的标题。长度会有很大的不同。

应该发生什么： 当元素的面包屑列表变得太长，不能显示在他们应该调整容器，以确保所有的人在容器内保持可见。

问题： 这似乎工作，但只能达到一个点。一旦容器的列表变得对容器来说太长，我将容器宽度除以存在的面包屑元素的数量，并相应地设置元素宽度。 但是，这不会一致地工作，有时会显示列表中的最后一个文档，但拒绝显示其直接父项（如果选中）。

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

Iv做了一个小提琴来大致强调正在发生的事情，甚至在这里你可以看到，元素没有正确调整大小，以确保它们全部显示。这是最明显的，因为添加了8个或更多的元素。

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

谁能告诉我什么，我做错了吗？

非常感谢

MVK

Answer 1

您必须减去填充，边距和边框大小（你的情况：9px，2 * 3填充，2 * 1边框和1对左边距）的按钮宽度：

var Lok = (BredWid/ButCount)-9; 

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

下面是一个简单的例子：

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

你会发现，总宽度是不完全等于容器宽度（有按钮之后的小空白），这是由于宽度的倒圆。

在第一个示例（您的版本）中，最后的空白由于比Lok小的按钮。