javascript - script - Mantener elementos envueltos juntos

script javascript html

Question

Tengo varios elementos en HTML que quiero mantener agrupados cuando se ajustan. Creo que la respuesta está en algunos CSS (o quizás 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 sucede es que los usuarios a veces cambian 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, la entrada B no está al lado de su elemento de entrada. ¿Hay una manera de agrupar la etiqueta y la entrada para que se envuelvan? He intentado divs y poner los elementos juntos en una tabla con "nowrap", con resultados mixtos. No me importa que las líneas se ajusten, solo necesito mantener la etiqueta y el elemento de entrada juntos.

Answer 1

Como dijo que estaba en una tabla, aquí 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>​

Ahora puede modificar su css de la manera que desee.

Answer 2

Intenta 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: envuelva tanto <label> como <input> en un <div> con display: inline-block

Answer 3

La respuesta simple es envolver los elementos en otro elemento que tenga una pantalla: el bloque en línea como un estilo. Asi que...

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

Y

.wrapper {
  display: inline-block;
}

Answer 4

Podría poner cada etiqueta / grupo de entrada en un <span> y luego configurar el css para display:inline . Estoy bastante seguro de que esto lo mantendrá agrupado. Dependiendo de la disposición de su sitio y de la CSS anterior, es posible que tenga que ajustar el intervalo de CSS.

Answer 5

Pon todos esos elementos en un div como este:

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

Answer 6

También puede valer la pena ver la configuración de las divisiones de los padres alrededor de cada par que desee mantener juntos. Sé que usted dijo que lo intentó, pero también les da un ancho y una pantalla fijos: en línea; y debería funcionar

ALSOO incluye float: izquierda / derecha; (elija solo una) De esta manera, si la ventana del navegador es demasiado pequeña para mostrarlos uno al lado del otro, tomará el par final y lo colocará en la siguiente línea, pero debería mantener todos los elementos Dentro de juntos y lado a lado.