調整元素的大小以適合其容器

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小的按鈕。