面包屑的动态宽度

Question

我有点被困在这里，我正在寻找一些想法。我有一个面包屑系统，它使用:before和:after标记作为箭头。

放在一起的所有面包屑的最大宽度为735px，因为它是容器元素的大小。

现在;我需要限制每个面包屑的长度以阻止它们溢出并确保它们都保持在一条线上。为此，我需要在面包屑上设置最大宽度。但是max-width将取决于当前可见的面包屑数量。

我知道最简单的方法是计算存在的面包屑数量，并通过将容器宽度除以面包屑的数量来设置固定位置，但这是 不 我想要的 - 这意味着标题更短的面包屑有一个很大的差距，如下所示。

所以我需要指定一个max-width，但max-width将取决于其他面包屑的宽度。

例如，如果所有面包屑都有相当长的标题，max-width将需要足够小以允许所有面包屑适合容器。

但是，如果说，其中五个面包屑的标题很短（即4个字符）而第五个标题的标题更长，我希望max-width允许最后一个面包屑上的所有文本都是显示，但仍然确保面包屑仍然适合容器。

对不起，如果这太混乱了。这是我的面包屑的jsFiddle，所以你可以理解它们的结构。如果您需要更多信息，请告诉我。

http://jsfiddle.net/5CLYt/

jsFiddle中的第二个示例显示了max-width如何依赖于其他面包屑的宽度，而不仅仅是显示的面包屑数量。

Answer 1

除了@JAYBEkster的答案，你可以考虑使用flexbox。 这是一个很好的资源：http://css-tricks.com/snippets/css/a-guide-to-flexbox/

我已更新你的fidle：http://jsfiddle.net/NicoO/5CLYt/1/

/*

COPIED FROM: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

*/

#container {
    display: flex;
    justify-content: space-around;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}

我知道这不是你想要的，因为物品之间的空间正在增长，而不是它自己的物品。但也许这是正确的方向。

也许保持这个问题更新。

更新2：flexbox非常棒。 它适用于firefox：http://jsfiddle.net/NicoO/5CLYt/3/

您需要做的就是：

.breadcrumbButton
{
    flex: 1 1 auto;
}

Answer 2

您应该为容器添加display：table;为每个孩子添加display：table-cell并删除浮动;