Mantener juntos los elementos envueltos

Question

Tengo varios elementos en HTML que quiero mantener agrupados cuando se envuelven. Creo que la respuesta está en algunos CSS (o incluso en JavaScript), pero no estoy seguro. Por ejemplo, tengo varios elementos establecidos así:

<label A><input A><label B><input B><label C><input C> 

Lo que pasa es que los usuarios a veces cambiar el tamaño de la ventana del navegador, y terminamos con esto:

<label A><input A><label B> 
<input B><label C><input C> 

En el ejemplo anterior, el la entrada B no está al lado de su elemento de entrada. ¿Hay alguna manera de agrupar la etiqueta y la entrada para que se envuelvan juntas? Probé los divs y reuní los elementos en una tabla con "nowrap", con resultados mixtos. No me molesta el ajuste de líneas, solo necesito mantener juntas la etiqueta y el elemento de entrada.

Answer 1

También puede valer la pena mirar la configuración de los padres divs alrededor de cada par que desea mantener juntos - Sé que dijo que probó esto, pero también les dio un ancho fijo y la pantalla: en línea; y debería funcionar

ALSOO include float: left/right; (choose only one) De esta forma, si la ventana del navegador es demasiado pequeña para mostrarlas una al lado de la otra, tomará el par final y lo colocará sobre la siguiente línea, pero debe mantener todos los elementos juntos y uno al lado del otro.

Answer 2

Puede poner cada etiqueta/grupo de entrada en <span> y luego establecer el css en display:inline. Estoy bastante seguro de que esto lo mantendrá agrupado. Dependiendo del diseño de su sitio y CSS anterior, puede que tenga que modificar el span css.

Answer 3

Pruebe algo como esto:

<label>First Name: 
    <input type="text"> 
</label> 
<label>Last Name: 
    <input type="text"> 
</label> 

y establecer

label { 
    display: inline-block; 
} 

demostración http://dabblet.com/gist/3145028

Alternativa: abrigo tanto <label> y <input> en un <div> con display: inline-block

Answer 4

Ponga una ll de esos elementos en un div como este:

<div style="white-space: nowrap"> 
    ... 
</div> 

Answer 5

ya que dijo que esto era en una mesa, esto es probablemente lo que estaba buscando: http://jsfiddle.net/DX9G7/

HTML:

<table border="0" cellspacing="0" cellpadding="0"> 
    <colgroup> 
     <col width="30%" /> 
     <col width="30%" /> 
     <col width="40%" /> 
    </colgroup> 
    <tr> 
     <td> 
      <div class="form-row"> 
       <label>A</label> 
       <input type="text" /> 
      </div> 
      <div class="form-row"> 
       <label>B</label> 
       <input type="text" /> 
      </div> 
      <div class="form-row"> 
       <label>C</label> 
       <input type="text" /> 
      </div> 
     </td> 
    </tr> 
</table>​ 

Usted ahora puede modificar su CSS de la manera que desee.

Answer 6

La respuesta simple es envolver elementos en otro elemento que tiene una pantalla: bloque en línea como estilo. Así que ...

<span class='wrapper'> 
    <span class='left-side'></span> 
    <span class='right-side'></span> 
</span> 

Y

.wrapper { 
    display: inline-block; 
}