如何使div填充剩餘空間，並在必要時轉到下一行？

Question

這裏是我迄今作爲演示的例子：

link to demo

而這裏的，我現在使用的CSS：

body { 
    background-color: darkgrey;  
} 

.container { 
    background: #ccc; 
    max-width: 300px; 
    overflow: hidden; 
} 
.label { 
    float: left; 
} 
.filler { 
    overflow: hidden; 
    display: block; 
} 
.filler input { 
    min-width: 150px; 
    width: 100%; 
    border: none; 
} 

我試圖完成是一種快速的方式來添加標籤（幾乎完全類似於stackoverflow上的標籤系統），同時讓輸入始終位於最後輸入的標籤div之後。到目前爲止，我已經完成了這一點，除了最後一個標籤被推到下一行時。

我真的很喜歡非JavaScript解決方案，但如果任何人有一個優雅的JavaScript解決方案，我願意接受它！

Answer 1

莫非

這有什麼用處？我沒有贊成JavaScript，我沒有測試它，但它看起來很簡單。聽起來你所需要的只是一種讓退格減去寬度的方法。

Create a text box with an auto-expanding width?

Answer 2

使用display: inline-block，而不是float: left：

CSS

.label { 
    display: inline-block; 
} 
.filler { 
    overflow: hidden; 
    display: inline-block; 
} 

Demo

Answer 3

我知道這是不是一個代碼解決方案，但也許現有的插件可以提供幫助。例如：jQuery Tags Input Plugin？我確信還有其他的，但可能重用，除非你的用例有很大的不同？

（我本來只是增加了一個評論，但我的代表處ins't足夠高，但:)）

Answer 4

試試這個：

.label { 
    display: inline-block; 
} 

這裏是小提琴：http://jsfiddle.net/vGWCR/