页面宽度面包屑棒作为在apple.com/store

Question

我想建立一个（不知道什么叫它除外）在页面顶部的面包屑棒，有点像在http://store.apple.com/us/browse/home/shop_mac/software，你知道吗，在页面的顶部，水平，浅灰色条，看上去像这样

[home icon] | Shop Mac | Mac Software      Help | Account | Cart 

其实，我有一个酒吧工作，有一个弯曲的正方形左边缘，中间字形，弯曲，方形右边。所以，我的酒吧看起来像这样

[ Home > Foo > Bar > Baz ] 

我有很少的图形片段组成[和>和]和中间部分。唯一的问题是，我希望右边缘位于页面的右边缘。所以，上面的酒吧看起来应该像这样

[ Home > Foo > Bar > Baz              ] 

我想在我的面包屑吧可变数目个条目的......所以，我能有“家富，酒吧，巴兹”我也可以有“Home，Foo”或“Home，Foo，Bar，Baz，Qux”等。换句话说，我想让我的酒吧的右边缘动态足够长，以延伸到我的网页边缘。

对此提出建议？

Answer 1

我会尝试将除了右括号以外的其他面包屑元素放入div（或跨度）中，并将该元素在外容器中左移。将右括号放入浮动到右边的元素中。 “外部容器”可以是按照尺寸或百分比设置为所需宽度的某种格式，并根据布局的需要进行定位。

还有其他的方法可以达到你想要的效果，但是这应该给你一个方法作为出发点。