如何使用文本换行将div放在一行？

Question

我正在制作一个应用程序，可以将标签添加到帖子中，就像stackoverflow的标记系统一样。我想显示所有常用标签的列表，每个标签都在一个完全适合标签的小盒子中（例如<input type="submit">标签拉伸以适合单词的大小）。我怎样才能做到这一点，并让<div>水平对齐，并在其包含的div中进行文本换行？即像这样的东西，每个单词都有<div id="tag">：

tag1 thisisalongtag
biology physics
thiswordwraps science
one two three four

Answer 1

最简单的解决方案是使用display: inline-block设置标记元素的样式，从而允许文本换行，同时防止边距折叠。

• DEMO

Answer 2

display:inline-block

不适用于所有浏览器（较旧的IE ...包括7）

试试这个：

http://jsfiddle.net/mtwDX/

标签是内联的但是带有空格：nowrap;和正确的行高设置

希望这会有所帮助

Answer 3

我不确定我是否完全理解你的问题但是有不同的方法来实现这种“标记”效果。

你可以将div设置为float：left，clear：left并给它一点填充（所有边都是5px）。然后将所有标签放在一个固定宽度的容器中，它们应该水平地平铺，直到它们用完房间，此时它们将包裹到下面的下一个“线”。

更简单的方法是使用在此站点上使用的内联元素（例如锚标记）（stackoverflow）。元素自然地水平流动，直到它们用完房间然后包裹。如果你检查它们，你会发现它们的风格并不多。并且它们的行为与内联元素的行为方式相同。

有时候解决方案比你想象的要简单。您可能不需要打扰div或浮动。但是如果没有更多的信息，很难确切地说出对你有用的东西。