페이지 apple.com/store에서 넓은 너비의 빵 부스러기 바

Question

나는 (그게 아닌 다른 부르는 것)을 만들려고한다. 페이지 상단의 빵 부스러기 바 (bar)는 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"또는 "Home, Foo, Bar, Baz, Qux"등이 있습니다. 즉, 바의 오른쪽 가장자리가 동적으로 웹 페이지의 가장자리까지 확장되기를 바랍니다.

제안 사항?

Answer 1

닫는 브래킷 이외의 빵 부스러기 요소를 div (또는 span)에 배치하고 외부 컨테이너 내에서 왼쪽으로 그 요소를 플로팅 해보겠습니다. 닫힌 브래킷을 오른쪽으로 떠 다니는 요소에 놓습니다. "외부 컨테이너"는 크기 나 백분율에 따라 원하는 너비로 설정된 일종의 div 일 수 있으며 레이아웃 요구에 따라 배치 될 수 있습니다.

원하는 효과를 얻으려면 다른 방법이 있지만 시작 지점으로 하나의 방법을 제공해야합니다.