Mantener los botones de radio con sus tags en los saltos de línea.

Tengo un formulario HTML con secciones dispuestas así:
introduzca la descripción de la imagen aquí

Quiero que las tags estén en línea para que esta sección no tenga 7 saltos de línea, pero me gustaría saber cómo puedo asegurarme de que los botones de radio permanezcan en sus tags.

Nota: las tags son de diferentes longitudes y están pobladas dinámicamente con datos del servidor, por lo que no puedo establecer un div de ancho fijo sin causar algunos problemas de espaciado extraños.

Si hay una forma idiomática de hacer esto, por favor muéstrame.

Coloque cada par de entrada / etiqueta en un espacio, luego configure white-space: nowrap el intervalo. Algo como esto:

 
...

CSS:

 .radios > span { white-space: nowrap; } 

Edición: la técnica anterior tiene un error en Chrome donde las parejas no se ajustan y, en cambio, están ocultas. Este error se muestra en la pregunta El texto no se ajusta correctamente entre los elementos que tienen white-space: nowrap . Las soluciones incluyen el uso de float: left con un margen agregado para compensar el espaciado contraído, o para eliminar el HTML hasta que funcione. Si acaba de poner y como la misma línea que , funciona.

 
...

jsfiddle.net/Z5uaT/57

Coloque la checkbox dentro de la etiqueta (sí, esto es válido) y haga la etiqueta inline-block (vea este JSfiddle para una demostración). En mi opinión, esta es una solución más elegante y semántica que la envoltura de span sugerida por gilly3 , por lo que decidí publicar aunque ya haya aceptado una respuesta.