Предотвратить встроенные элементы от линии разрыва в пределах своей группы

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

Попробуйте использовать span: after селектор. См. Это example. Это обеспечивает очень элегантное решение проблемы путем вставки разрыва строки после каждого элемента span.

Answer 4

Использование display: inline-block

http://jsfiddle.net/Y3NSZ/