如何以精心设计的方式对齐div标签中的span标签？

Question

我坚持这一点。请看看这个http://jsfiddle.net/karthik64/5jhgF/3/

好的，首先在输入框中输入一些输入并点击回车，你会看到一个span元素被添加到div并尝试输入更多的值和 我想你得到的问题是什么。有人能告诉我如何以<span>标签很好地适应这些<div>标签。

我已经设置了我的div标签宽度并使用javscript我将一些元素添加到div标签中，并且我得到某种类似于某些奇怪的错误。如果用户输入dennis ritchie，史蒂夫作业和账单门，我的代码就像这样

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

相反它应该是这样的

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

如果它不能适应剩余空间中的span标记，我希望整个span标记元素跳转到下一行而不是打破span标记值我该怎么做。请帮助我这个。非常感谢帮助.Thanks

Answer 1

<span>不是block-level elements，并且不会像您默认描述的那样呈现（它们用文本换行）。将CSS display: inline-block;应用于您的跨度以阻止它们进行包装。

Answer 2

在较新的浏览器中，将display: inline-block;添加到.music_elements样式规则。

在较旧的浏览器上，float: left;可能会有效。