インライン要素がグループ内で改行しないようにする

Question

http://jsfiddle.net/jaWjB/1/

改行は、2番目のイメージとそのラベルの間で行われます。 <span class="group">要素を非圧縮ブロックのように動作させ、ブロック間で改行が行われるようにしたい。

これは、上記のフィドルはなく

[img]label[img] 
label 

の

[img]label 
[img]label 

ようにレイアウトされますが、使用可能な十分な幅がある場合、それはこの

[img]label[img]label 

のように表示されるはずです意味します

現時点では、私はテーブルでのみこれを行うことができます。別の方法がありますか？

Answer 1

は

を編集あなたのCSSでこれを追加span: afterセレクタ。これはexampleを参照してください。それは、すべてのspan要素の後に改行を挿入することによって、非常にエレガントな解決策を提供します。

Answer 2

あなただけそうのように、あなたの.groupクラスにdisplay:inline-blockを追加することができます。彼らは

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

Answer 3

使用してみてください十分な幅でインラインになるようにhttp://jsfiddle.net/jaWjB/7/

Answer 4

使用display: inline-block

http://jsfiddle.net/Y3NSZ/