防止内联元素在其组内断行

Question

请参阅http://jsfiddle.net/jaWjB/1/

换行发生在第二张图片及其标签之间。我想让任何<span class="group">元素表现得像一个不可压缩的块，这样换行就会发生在块之间但不在它们之内。

这意味着上面的小提琴将被列为

[img]label
[img]label

而不是

[img]label[img]
label

但是，如果有足够的宽度，它应该显示如下

[img]label[img]label

目前我只能用表格来做这件事。还有另一种方式吗？

Answer 1

在你的css中添加这个

编辑以便它们具有足够宽度的内联

p {
width: 10ex;
border: thin solid red;
display:inline;
}
​span{
display:inline-block;
}​

Answer 2

您可以将display:inline-block添加到.group课程中，如下所示：http://jsfiddle.net/jaWjB/7/

Answer 3

使用display: inline-block

http://jsfiddle.net/Y3NSZ/

Answer 4

尝试使用span: after选择器。见example。它通过在每个span元素之后插入换行符来提供非常优雅的解决方案。