如何以精心設計的方式將div標籤中的span標籤對齊？

Question

以及即時通訊stucked在這個point.please看看這個http://jsfiddle.net/karthik64/5jhgF/3/

好了先進入一些輸入到輸入框中並按下回車鍵，你會看到一個span元素添加到div，並嘗試輸入一些更多的價值和 我想你得到了什麼問題。有誰可以告訴我，我怎樣才能以合適的方式將<span>標籤貼在<div>標籤上。

我已經設置了我的div標籤寬度並使用javscript我在div標籤中添加了一些元素，並且我得到了一些類似的奇怪的bug。如果用戶輸入丹尼斯里奇，史蒂夫·喬布斯和比爾·蓋茨我的代碼工作喜歡這個

..dennis ritchie.. ..steve jobs.. ..bil 
    l gates.. 

相反，它應該是這樣的

..dennis ritchie.. ..steve jobs.. 
    ..bill gates.. 

，如果它不能在剩餘空間適合span標籤，我想整個跨度標記元素跳轉到下一行，而不是打破跨度標記值我該怎麼做。請幫助我與this.any幫助是極大讚賞。謝謝

Answer 1

<span> s不是block-level elements並且不呈現像你descri默認情況下（他們用文字包裝）。將CSS display: inline-block;應用到您的跨度以防止它們纏繞。

Answer 2

在較新的瀏覽器上，將display: inline-block;添加到.music_elements樣式規則中。

在較舊的瀏覽器上，float: left;可能有效。